CSS Images

Hi,
Is there anyway to find out the CSS images delivered with SAP Portals.
For ex. I am trying to customize the light detailed tree delivered with Portal.
When I downloaded lightdetailed tree from Portal and imported into NWDS, CSS images in the /dist/css folders are missing.
Can anybody tell me from where I can get these css files.
P.S : I do not hv access to login to server via remotely.
Best Regards,
Ravi Kumar.

Hi,
The best way to change the look and fill of the portal is to use the theme editor.
you can change there the icons of the light detailed navigation tree as well, you can check this link for info:
http://help.sap.com/saphelp_nw04/helpdata/en/1a/d7c1617dd29e4d85064b467636fada/content.htm
You need to navigate to System Administration -> Portal Display,
choose your theme.
then the theme editor will be opened, and you need to choose the light Detailed Navigation iView, and then you will be able to change the images you want.
Hope its help,
Avi

Similar Messages

Multiple CSS image rollovers on a page

Hi there,
So, I have miraculously managed to create my first ever CSS image rollover navigation button on my webpage. This page is an online art gallery so there will be several small image rollover buttons linking to different pages of art.
My question is now that I've created one CSS rollover, do I have to create a brand new one for each additional button or is there a way to change the image and name of the existing button?
Here is my CSS and HTML for the existing image rollover:
/** Declaration for the a.singleRollover selector **/
a.singleRollover {
    display: block;
    width: 90px;
    height: 90px;
    overflow: hidden;
    text-indent: 0px;
    font-size: 0px;
    line-height: 0px;
    background-image: url(../Images/CSS%20Rollover/ButtonTOBI.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
/** Declaration for the additional states of the a.singleRollover selector **/
a:hover.singleRollover {
    background-position: 0 -90px;
    background-image: url(../Images/CSS%20Rollover/ButtonTOBI.jpg);
<div id="smallBox01a"><a class="singleRollover" title="Tobi rollover" href="Images/CSS Rollover/ButtonTOBI.jpg"></a></div>
The problem is that the background image is already set as ButtonTOBI. Is there a way to specify the image in the HTML each time individually rather than in the main a.singleRollover item? It seems very repetitive to have to go in and create lots of individual CSS rollover buttons.
Thanks in advance for any help.

Go here -
http://www.alistapart.com/articles/sprites
http://www.tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.a sp
Read about how to use a single image for all of your menu 'rollovers'. It works great!

Help with CSS image Gallery

Found this simple css image gallery. However I'm having trouble adjusting it do my needs. I ideally want to make each small image slightly bigger than currently and have 3 or 4 on each line. Also want to make the enlarged image bigger. The width would need to be around 550px.
<style type="text/css">
* This notice MUST stay intact for legal use.
* This script was created for FREE CSS Menus.
* Visit: www.freecssmenus.co.uk for more CSS.
* Also visit our Free online menu creator.
/* credits: www.freecssmenus.co.uk */
#pg { width:390px;
height:200px;
border:2px dotted #666;
padding:5px;
padding-top:15px;
#pg ul { list-style:none;
padding:0;
margin:0;
width:180px;
position:relative;
float:left;
#pg ul li { display:inline;
width:52px;
height:52px;
float:left;
margin:0 0 8px 8px;
#pg ul li a { display:block;
width:50px;
height:50px;
text-decoration:none;
border:1px solid #000;
#pg ul li a img { display:block;
width:50px;
height:50px;
border:0;
#pg ul li a:hover { white-space:normal;
border-color:#336600;
background-color:#AABB33;
#pg ul li a:hover img { position:absolute;
left:190px;
top:0;
width:auto;
height:110px;
border:1px solid #000;
#pg ul li a span {display:none}
#pg ul li a:hover span { display:block;
position:absolute;
left:5px;
top:130px;
width:350px;
height:auto;
font-size:12px;
color:#999999;
</style>
html
<div id="pg">
<ul>
<li>
<a href="css_rollover_uk_map.php">
<img src="upimage/ukmap345.jpg" alt="Css Rollover Map" />
<span>
<strong>
CSS Map.</strong>
CSS Image swap on rollover/hover. This simple display of CSS shows the versatility of Cascading Style Sheets. Remember this animation is 100% User Accessible.</span>
</a>
</li>
<li>
<a href="big_css_button.php">
<img src="upimage/bigbutton1390.jpg" alt="Large Css Button" />
<span>
<strong>
CSS Big Button.</strong>
Css buttons can be as large and as extravagant as you like. Using one image you can create simple css buttons like this. This button is still a hyperlink not just an image.</span>
</a>
</li>
<li>
<a href="menu_opacity.php">
<img src="upimage/003opacity639.jpg" alt="Css Opacity" />
<span>
<strong>
CSS Opacity Menu.</strong>
you can use styles to change the opacity of an image. This creates interesting effects when creating a menu. </span>
</a>
</li>
<li>
<a href="#">
<img src="upimage/freemusic885.jpg" alt="Free Mp3 Downloads: Unborn Records" />
<span>
<strong>
Unborn Records </strong>
Download free mp3 music for your ipod or mp3 player. Download free music from unsigned artists</span>
</a>
</li>
<li>
<a href="#">
<img src="upimage/trix363.jpg" alt="Visit Trix the dog at www.catandtwodogs.co.u" />
<span>
<strong>
Cat And Two Dogs </strong>
Visit my three pets at www.catandtwodogs.co.uk . This is a picture of trix, he's a border collie.</span>
</a>
</li>
<li>
<a href="#">
<img src="upimage/colours238.jpg" alt="A picture of colours in a swirl" />
<span>
<strong>
A swirl of colours. </strong>
This is just a picture of colours in a swirl effect.</span>
</a>
</li>
</ul>
</div>

Sorry can't do this at the moment.
I've decided to switch to the JQuery Lightbox Image Gallery instead. In IE8 I get the following message:
Message: Script error
Line: 0
Char: 0
Code: 0
URI: file:///C:/Documents%20and%20Settings/User/My%20Documents/SRC12-13/all%20html%205/all%20ht ml%205/Simple-HTML-5-Template/Simple%20HTML%205%20Template/js/jquery.lightbox-0.5.min.js
My page works and my js is refenced correctly. Not sure if this is just a IE8 thing, or whether the page needs uploading to work correctly. Works fine in Chrome.
Wonder if there is a way to fix this?

Unable to install supporting objects(custom CSS/Images) through SQL

4.2.1
Hi there,
we have a Apex app which uses custom CSS/images loaded into shared objects CSS and image folders respectively. I followed the steps
http://nerd.net.au/29-apex-application-express/general-application/122-include-images-with-supporting-objects-on-apex-export-import
Now, this works fine when we manually import the application through application builder, it "prompts" if we want to install supporting objects, when yes is selected, everything gets installed.
MY problem is we have an automated patching process where the .sql application file gets installed but the supporting objects are not. So I tried bundling the supporting object as a separate .sql file but got an error
Testing options PL/SQL procedure successfully completed. declare * ERROR at line 1: ORA-20001: Package variable g_security_group_id must be set. ORA-06512: at "APEX_040200.WWV_FLOW_IMAGE_API", line 11 ORA-06512: at "APEX_040200.WWV_FLOW_IMAGE_API", line 31 ORA-06512: at
The supporting object is a button. Do I need to set the application id or security group id or something else?
begin
wwv_flow_api.g_varchar2_table := wwv_flow_api.empty_varchar2_table;
wwv_flow_api.g_varchar2_table(1) := '89504E470D0A1A0A0000000D494844520000009600000051080600000030EC5FEE000000097048597300000B1300000B1301009A9C1800000A4D6943435050686F746F73686F70204943432070726F66696C65000078DA9D53775893F7163EDFF7650F56';
wwv_flow_api.g_varchar2_table(2) := '42D8F0B1976C81002223AC08C81059A21092006184101240C585880A561415119C4855C482D50A489D88E2A028B867418A885A8B555C38EE1FDCA7B57D7AEFEDEDFBD7FBBCE79CE7FCCE79CF0F8011122691E6A26A003952853C3AD81F8F4F48C4C9BD80';
wwv_flow_api.g_varchar2_table(3) := '021548E0042010E6CBC26705C50000F00379787E74B03FFC01AF6F00020070D52E2412C7E1FF83BA50265700209100E02212E70B01905200C82E54C81400C81800B053B3640A009400006C797C422200AA0D00ECF4493E0500D8A993DC1700D8A21CA908';
wwv_flow_api.g_varchar2_table(4) := '008D0100992847240240BB00605581522C02C0C200A0AC40222E04C0AE018059B632470280BD0500768E58900F4060008099422CCC0020380200431E13CD03204C03A030D2BFE0A95F7085B8480100C0CB95CD974BD23314B895D01A77F2F0E0E221E2C2';
wwv_flow_api.g_varchar2_table(5) := '6CB142611729106609E4229C979B231348E7034CCE0C00001AF9D1C1FE383F90E7E6E4E1E666E76CEFF4C5A2FE6BF06F223E21F1DFFEBC8C020400104ECFEFDA5FE5E5D60370C701B075BF6BA95B00DA560068DFF95D33DB09A05A0AD07AF98B7938FC40';
wwv_flow_api.g_varchar2_table(6) := '1E9EA150C83C1D1C0A0B0BED2562A1BD30E38B3EFF33E16FE08B7EF6FC401EFEDB7AF000719A4099ADC0A383FD71616E76AE528EE7CB0442316EF7E723FEC7857FFD8E29D1E234B15C2C158AF15889B850224DC779B952914421C995E212E97F32F11F96';
wwv_flow_api.g_varchar2_table(7) := 'FD0993770D00AC864FC04EB607B5CB6CC07EEE01028B0E58D27600407EF32D8C1A0B91001067343279F7000093BFF98F402B0100CD97A4E30000BCE8185CA894174CC608000044A0812AB041070CC114ACC00E9CC11DBCC01702610644400C24C03C1042';
wwv_flow_api.g_varchar2_table(8) := '06E4801C0AA11896411954C03AD804B5B0031AA0119AE110B4C131380DE7E0125C81EB70170660189EC218BC86090441C8081361213A8811628ED822CE0817998E04226148349280A420E988145122C5C872A402A9426A915D4823F22D7214398D5C40FA';
wwv_flow_api.g_varchar2_table(147) := 'A514B7B6B6EA5AADA60B8582EAECEC54511471BD5EE7BEBE3EBF4E108FCA58FE9601580A68199FDAF12F8D1DDB5E3386221ADD8E3AF3CEC772A73505D60820C32BF0238E6DAF5D508DBAFFF2CFACE20C3E9A03E2789F3430B68D6DAF641BF33D8D6D63C0';
wwv_flow_api.g_varchar2_table(148) := '1ADBC68035B68D016B6C1BDBC68035B6BD46B6FF3B0074B1DD40306DC6CD0000000049454E44AE426082';
end;
declare
    l_name   varchar2(255);
begin
    l_name := 'logo.png';
wwv_flow_api.create_or_remove_file(
     p_name=> l_name,
     p_varchar2_table=> wwv_flow_api.g_varchar2_table,
     p_mimetype=> 'image/png',
     p_location=> 'WORKSPACE',
     p_nlang=> '0',
     p_mode=> 'CREATE_OR_REPLACE',
     p_type=> 'IMAGE');
end;
/

Thanks Fac586! I did follow the process on those lines and was able to successfully get the images, application installed. The CSS which just had
body {
     background-color:#000000;
}Was also applied. However, it for some reason does not work. Looks like the CSS is not getting loaded. When I delete the CSS and upload it again through the shared components->CSS folder, it works fine. Not sure what the solution is!
Oh and by the way, thanks a ton for helping everyone!
Cheers,
Ryan

Some nagging CSS image rollover questions

Hi,
I'm using DW CS4 here. I finally got a Top Horizontal Inline CSS navigation to work with CSS image rollovers. Here's the site:
http://www.brightbeltmusic.com
And here are my questions:
-Why, when my original images are 90 px wide x 30 h, do I have to cut the width in the code to 84 px to make things line up?
-I can't seem to set the images by obvious pixel widths - any little thing throws the whole navigation onto the next line and so I have to set the 'Up' image as a repeating background, while shortening the actual image link itself. Is this right? It seems to "work" here but maybe barely.
-Padding seems to always be set in 'ems' - so how many pixels are in an 'EM' ? This is so I can figure out the width issues I always seem to have when I want horizontal rollover images...
-Margin for a # ul apparently effects the very end/outside of the list....Is there such a thing as margins for the individual # li ?
I guess I need a good pointing to a image rollover tutorial for Horizontal inline navigation.
Many Thanks for any help. It just seems like I play a guessing game on the pixel details when I'm trying to construct these types of mavigation.
Thanks, Frank B.

brightbelt wrote:
Hi,
I'm using DW CS4 here. I finally got a Top Horizontal Inline CSS navigation to work with CSS image rollovers. Here's the site:
http://www.brightbeltmusic.com
And here are my questions:
-Why, when my original images are 90 px wide x 30 h, do I have to cut the width in the code to 84 px to make things line up?
Probaby because you are not taking into account padding, borders and margins which add to the width of the container/s
brightbelt wrote:
-I can't seem to set the images by obvious pixel widths - any little thing throws the whole navigation onto the next line and so I have to set the 'Up' image as a repeating background, while shortening the actual image link itself. Is this right? It seems to "work" here but maybe barely.
Mathematicis is critical to the set up. As stated padding and borders, margins etc add to the overall width of a container. So if the containers are too wide to fit in a specific width they will be thrown to the next available space, usually to the next line.
Example: a container which is set at a specific width of 90px and has padding left and right of say 8px is really 106px wide. Therfore if you're trying to allocate space for 6 buttons where each is 90px wide and has 8px padding left/right you need to allocate a space 6 x 106px plus any borders.
brightbelt wrote:
-Padding seems to always be set in 'ems' - so how many pixels are in an 'EM' ? This is so I can figure out the width issues I always seem to have when I want horizontal rollover images...
Personally I would never recommend setting padding in ems. Certainly ems and px don't mix and match very well.
brightbelt wrote:
-Margin for a # ul apparently effects the very end/outside of the list....Is there such a thing as margins for the individual # li ?
li's do have default padding and margins set so these need to be zeroed out.
li {
margin: 0;
padding: 0;
As an experiment copy all the code below, open a new Dreamweaver document and paste it into code view, save it to your site folder with the name navigationTest.html. Run it through a browers and see what the results are like.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#navcontainer {
width: 775px;
margin: 0 auto;
background-image: url(navUp.gif);
background-repeat: repeat-y;
overflow: hidden;
#navcontainer ul {
width: 547px;
padding: 0;
margin: 0 auto;
background-image: url(navUp.gif);
#navcontainer ul li {
width: 90px;
float: left;
margin: 0;
padding: 0;
list-style: none;
#navcontainer ul li a {
background-image: url(navUp.gif);
background-repeat:no-repeat;
color: #fff;
text-decoration: none;
font-weight:bold;
width: 90px;
display: block;
text-align: center;
float: left;
border-right: 1px solid #069;
padding: 5px 0;
font-family: arial, helvetica, sans-serif;
font-size: 14px;
</style>
</head>
<body>
<div id="navcontainer">
    <ul>
    <li><a href="index.htm" style="border-left: 1px solid #069;">Home</a></li>
    <li><a href="Contact_Us.htm">Contact</a></li>
    <li><a href="Profiles.htm">Profiles</a></li>
    <li><a href="Catalogue.htm">Songs</a></li>
     <li><a href="BBL.htm">BBL Label</a></li>
    <li><a href="Jazz_links.htm">Links</a></li>
    </ul>
</div>
</body>
</html>

New to dw css images not showing

I made a practice site on one computer with dw using a css temp . my folder has html-images-template-default-index i click on index it all works
i put it on my mem stick put the same folder on another computer with apache in hdocs it works but its not showing the css images everything but
it must be a simple fix it all worked on the computer with dw and thats not opening dw thank you ken

when css images refuse to show up in the browser after a site was copied to a new pc or the server itself it's usually because the path to your image in the css is not valid anymore
Most common causes of these problems are:
- using absolute links to the local file system instead of relative links.. If your path to the image starts with a drive letter/name like Macintosh HD: or C:\ for example, chances are it won't work anywhere else.
- folder name is capitalized like this: "Images" in the css while its "images" on the actual drive - same goes for file names & extensions (Picture.JPG is not always the same as picture.jpg)
- you forgot to copy the folder/image in question to the new drive - or copied it to the wrong place in the "folder tree structure".
- you moved/renamed the image folder or the image file itself without updating your css.
Theres no magic to it, no simple or complicated fix. All there is is to make sure that all paths used in the css exactly match the file structure on the drive and avoid absolute links.
If you could post the contents of your css file here - or give us a link to the server if your page is already online, we could prolly be more specific in our answers.
HTH,
Stephan

Class or Id on CSS Image Swap

Please look at my CSS image swap. I'm wondering if I can use an ID rather than a class and achieve the same results. If so, how would I change the code?
http://kcfi.biz/swap.html

#kfcard {
    height: 171px;
    width: 316px;
    margin:0;
    padding:0;
    background-image:url(/assets/kfcard/kfcard2.png);
#kfcard a {
    display:inline-block;
#kfcard img {
    width:100%;
    height:100%;
    border:0;
#kfcard a:hover img {
    visibility:hidden;
<div id="kfcard"><a href="http://kcfi.biz"><img src="/assets/kfcard/kfcard1.png" width="316" height="171"></a>

Migrating Content from a Custom ASP Page to a SharePoint Page Layout. Includes object tags to flash CSS images

Hi Guys,
I'm currently getting issues when trying to migrate content from ASP Pages used in a custom intranet developed by a client to SharePoint Pages.
My current strategy to do so is as per below:
a. Create ASPX Pages in Page Library with SharePoint Designer
b. Copy all common resource files needed by the pages within the Pages library. Includes folders for Javascript, CSS, images etc. This way relative address of resources in pages will pick up pages library as default folder
for resources.
c. Copy Source Code of Page from Browser by right-clicking ‘View Page Source’/ Copy code from .asp file
d. Clean the code to remove unnecessary codes from SharePoint Pages.
At this point page renders without SharePoint Branding.
However if I apply SharePoint Master Page onto the ASPX page by using Style > Attach > Default Master Page, this generates an Error when the page renders.
What is missing in this approach or what would be the best approach to migrate the page to SharePoint without code solution?
Grateful if you could help.
Thanks
Rhyan.

Hi Rhyan,
As I understand, you want to create a custom application page in SharePoint 2013.
If you copy the code in the asp page to aspx page, it cannot work. You should write the new code that can work in the asp file for the SharePoint aspx page.
There is a similar case:
https://social.technet.microsoft.com/forums/sharepoint/en-US/0a97820a-59b9-4430-a98c-d2941803c38e/classic-asp-pages-to-sharepoint-pages-migration
You can create a web application page in the visual studio. You also can explicitly change which master page is used by the application page by setting the MasterPageFile attribute of the application Page element. (For example: MasterPageFile="~/_layouts/applicationv4.master").
The articles below are about creating application Pages for SharePoint.
https://msdn.microsoft.com/en-us/library/ee231581.aspx
http://nikpatel.net/2012/01/20/custom-sharepoint-pages-site-pages-vs-application-pages/
Best regards,
Sara Fan
TechNet Community Support
Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact
[email protected]

Is there a way to create a CSS image gallery with caption?

Hi everyone,
Ive been using the disjoint rollover, but I only have one
thing that I want to add to it—a caption right underneath an
image.
Besides using that Project Seven plug-in, is there a way to
create an image gallery without using layers? Or is layers the only
way to do it? All I want (words of doom, huh?) is a thumbnail to be
able to switch and image and add a caption to it. Can anyone point
me in the right direction? Or is that Project Seven plug-in deal my
best bet? What about Set Text of Layer in DW.
Oh yeah, Im still using DW with CSS sprinkled in..any help?
Thanks in advance.
-C

> Besides using that Project Seven plug-in, is there a way
to create an
> image
> gallery without using layers?
Of course.
> What about Set Text of Layer in DW.
That would do it, and it's not necessary that the layer stay
a layer after
you have done it, either. I do this frequently - make a
layer, apply the
behavior, and then remove the position:absolute from the div,
and place it
where I want it.
See the demo here -
http://dreamweaverresources.com/tutorials/settextoflayer.htm
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"psypent81" <[email protected]> wrote in
message
news:eus555$lac$[email protected]..
> Hi everyone,
>
> Ive been using the disjoint rollover, but I only have
one thing that I
> want to
> add to it?a caption right underneath an image.
> Besides using that Project Seven plug-in, is there a way
to create an
> image
> gallery without using layers? Or is layers the only way
to do it? All I
> want
> (words of doom, huh?) is a thumbnail to be able to
switch and image and
> add a
> caption to it. Can anyone point me in the right
direction? Or is that
> Project
> Seven plug-in deal my best bet? What about Set Text of
Layer in DW.
>
> Oh yeah, Im still using DW with CSS sprinkled in..any
help?
>
> Thanks in advance.
>
> -C
>

Internal links in portal (CSS, images, and other struts actions)

Good morning gurus! I have another question regarding Struts Portlets. We have an application that builds a page with an image that comes from the database. The application is composed of two Struts actions. One that's in charge of drawing the page and the other action is in charge of bringing the image from the database. The second action is called from a JSP (img src="/getImage.do"). In portal, once the portlet rendered the JSP it doesn't recongnize the other links inside the JSP (the call to the second action). Also, other links suchs as images, CSS, and others Struts actions are not recognized. How can I access images, links, and CSS from the main application (the actual application).
Best regards,
Marcelo Oliva
Message was edited by:
molivas08

Hi Andrew -
This is a pretty big topic for one thread ... I will try to provide some pointers on where to look for more information.
1. Need ability for non-html literate authors to update text, images and links on their portion of a shared web page
In the following whitepaper, see the section: Associated Funtion for Item Display
http://www.oracle.com/technology/products/ias/portal/pdf/oow_10gr2_1336_fender.pdf
This will allow you to prompt your non-HTML literate users for the "parts" to display and you worry about the UI.
2. Need ability to enforce common look and feel on content provided by non-html literate authors.
Create pages based on Templates. Templates can force the style on users. Again - do not use text items and the RTE for users, you control the display with an Associated Function.
3. Prefer ability to approve content before it goes live.
Grant content contributors "Manage with Approval" access
5. Need advanced search capabilities
Check out the search section on Portal OTN
http://www.oracle.com/technology/products/ias/portal/content_management_10gr2.html
Hope this helps,
Candace

CSS Image Gallery - DEFAULT IMG

Not really a DW question but as I've had no replies on the appropriate forum, I thought I'd ask you guys for some help.
I'm using http://www.dynamicdrive.com/style/cs...e-gallery/P30/ but am unsure how to position a default image in the space where the enlarged img goes.
At the moment I have a large white space when none of the thumbnails are being activated.
Many thanks for any help.
Paul
CSS
.gallerycontainer{
position: relative;
width:780px;
height:auto;
margin-left:260px;
margin-top:100px;
border:1px solid #999999;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
padding:3px 7px 3px 7px;
.thumbnail:hover{
background-color: transparent;
.thumbnail:hover img{
border: 1px solid #E6E6E7;
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #FFFFFF;
padding: 5px;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
text-align:center;
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 270px; /*position where enlarged image should offset horizontally */
z-index: 50;
HTML
<div class="gallerycontainer">
<a class="thumbnail" href="#thumb"><img src="WHITE/images/T1.jpg" width="100" height="67" border="0" /><span><img src="WHITE/images/L1.jpg" width="500" height="333" /><br /> Simply beautiful.</span></a>
<a class="thumbnail" href="#thumb"><img src="WHITE/images/T2.jpg" width="100" height="67" border="0" /><span><img src="WHITE/images/L2.jpg" width="500" height="333" /><br />So real, it's unreal. Or is it?</span></a>
<br />
<a class="thumbnail" href="#thumb"><img src="WHITE/images/T3.jpg" width="100" height="67" border="0" /><span><img src="WHITE/images/L3.jpg" width="500" height="333" /><br />
Sushi for dinner anyone?</span></a>
<a class="thumbnail" href="#thumb"><img src="WHITE/images/T4.jpg" width="100" height="67" border="0" /><span><img src="WHITE/images/L4.jpg" width="500" height="333" /><br />
Run wild with horses.</span></a>
<br />
<a class="thumbnail" href="#thumb"><img src="WHITE/images/T1.jpg" width="100" height="67" border="0" /><span><img src="WHITE/images/L1.jpg" width="500" height="333" /><br />Simply beautiful.</span></a>
<a class="thumbnail" href="#thumb"><img src="WHITE/images/T2.jpg" width="100" height="67" border="0" /><span><img src="WHITE/images/L2.jpg" width="500" height="333" /><br />So real, it's unreal. Or is it?</span></a>
</div>

Change this -
<div class="gallerycontainer">
to this -
<div class="gallerycontainer">
<div style="position:absolute; left: 270px; z-index: 40;"><img src="your_default_image"></div>

CSS Image loading problem by dynamically loading from fxml file?

h1. Introduction
The application I am developing loads an FXML file from a Controller. The FXML uses CSS and images for buttons are set in the CSS.
CSS directory structure
<package>.fxml
Images
<package>.fxml.resources.<subdir>
Example CSS Code
.buttonImage {
    -fx-background-image: url("resources/subdir/image.png");
}Example loading fxml from controller code
         URL location = getClass().getResource("/package/fxml/UI.fxml");
         FXMLLoader fxmlLoader = new FXMLLoader(location);
         fxmlLoader.setLocation(location);
         fxmlLoader.setBuilderFactory(new JavaFXBuilderFactory());
         Parent root = (Parent)fxmlLoader.load(location.openStream());
         Controller = (Controller) fxmlLoader.getController();
         newPane.getChildren().add(root);h1. Problem
The fxml file does not load and causes the following error:
javafx.fxml.LoadException: Page language not specified.Note, the fxml file loaded correctly before images were added.
Any ideas of what might be going wrong?
h1. Attempted
I have attempted the following: tried changing the url of the image as an absolute path.

No Problem: Note, this is the actual FXML, my previous examples were simplifications of package names and class names in order to directly illustrate the problem. Note, I am using SceneBuilder to develop the FXML file.
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.collections.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<AnchorPane id="AnchorPane" prefHeight="396.0000999999975" prefWidth="350.0" styleClass="mainFxmlClass" xmlns:fx="http://javafx.com/fxml" fx:controller="com.monkygames.kbmaster.controller.ProfileUIController">
<children>
    <Label layoutX="14.0" layoutY="14.0" text="Profiles">
      <font>
        <Font size="18.0" />
      </font>
    </Label>
    <GridPane layoutX="15.0" layoutY="44.0" prefHeight="99.0" prefWidth="335.0">
      <children>
        <Label text="Type: " GridPane.columnIndex="0" GridPane.rowIndex="0" />
        <ComboBox fx:id="typeCB" prefWidth="249.0" GridPane.columnIndex="1" GridPane.rowIndex="0">
          <items>
            <FXCollections fx:factory="observableArrayList">
              <String fx:value="Item 1" />
              <String fx:value="Item 2" />
              <String fx:value="Item 3" />
            </FXCollections>
          </items>
        </ComboBox>
        <Label text="Program: " GridPane.columnIndex="0" GridPane.rowIndex="1" />
        <ComboBox fx:id="programCB" prefWidth="249.0" GridPane.columnIndex="1" GridPane.rowIndex="1">
          <items>
            <FXCollections fx:factory="observableArrayList">
              <String fx:value="Item 1" />
              <String fx:value="Item 2" />
              <String fx:value="Item 3" />
            </FXCollections>
          </items>
        </ComboBox>
        <Label text="Profile: " GridPane.columnIndex="0" GridPane.rowIndex="2" />
        <ComboBox prefWidth="249.0" GridPane.columnIndex="1" GridPane.rowIndex="2">
          <items>
            <FXCollections fx:factory="observableArrayList">
              <String fx:value="Item 1" />
              <String fx:value="Item 2" />
              <String fx:value="Item 3" />
            </FXCollections>
          </items>
        </ComboBox>
      </children>
      <columnConstraints>
        <ColumnConstraints fillWidth="false" halignment="RIGHT" hgrow="NEVER" maxWidth="-Infinity" minWidth="10.0" prefWidth="80.0" />
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      </columnConstraints>
      <rowConstraints>
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
      </rowConstraints>
    </GridPane>
    <HBox layoutX="14.0" layoutY="150.0" prefHeight="159.0" prefWidth="335.0">
      <children>
        <Label text="Description: " />
        <TextArea prefHeight="172.0" prefWidth="247.0" wrapText="true" />
      </children>
    </HBox>
    <HBox alignment="CENTER" layoutX="11.0" layoutY="334.0" prefHeight="48.0" prefWidth="329.0">
      <children>
        <Button fx:id="newProfileB" contentDisplay="GRAPHIC_ONLY" minHeight="48.0" minWidth="48.0" mnemonicParsing="false" onAction="profileEventFired" prefHeight="48.0" prefWidth="48.0" styleClass="newProfile" text="New Profile" />
        <Button id="newProfileB" fx:id="cloneProfileB" contentDisplay="GRAPHIC_ONLY" minHeight="48.0" minWidth="48.0" mnemonicParsing="false" onAction="profileEventFired" prefHeight="48.0" prefWidth="48.0" styleClass="cloneProfile" text="Clone Profile" />
        <Button id="newProfileB" fx:id="importProfileB" contentDisplay="GRAPHIC_ONLY" minHeight="48.0" minWidth="48.0" mnemonicParsing="false" onAction="profileEventFired" prefHeight="48.0" prefWidth="48.0" styleClass="importProfile" text="Import Profile" />
        <Button id="newProfileB" fx:id="exportProfileB" contentDisplay="GRAPHIC_ONLY" minHeight="48.0" minWidth="48.0" mnemonicParsing="false" onAction="profileEventFired" prefHeight="48.0" prefWidth="48.0" styleClass="exportProfile" text="Export Profile" />
        <Button id="newProfileB" fx:id="printPDFB" contentDisplay="GRAPHIC_ONLY" minHeight="48.0" minWidth="48.0" mnemonicParsing="false" onAction="profileEventFired" prefHeight="48.0" prefWidth="48.0" styleClass="pdfProfile" text="Print to PDF" />
        <Button id="newProfileB" fx:id="deleteProfileB" contentDisplay="GRAPHIC_ONLY" minHeight="48.0" minWidth="48.0" mnemonicParsing="false" onAction="profileEventFired" prefHeight="48.0" prefWidth="48.0" styleClass="deleteProfile" text="Delete Profile" />
      </children>
    </HBox>
</children>
<stylesheets>
    <URL value="@master.css" />
    <URL value="@profile.css" />
</stylesheets>
</AnchorPane>Edited by: 960799 on Jan 4, 2013 8:58 PM
Edited by: 960799 on Jan 4, 2013 8:59 PM

CSS images not loading

ALl when I had my images in the same package as the class. And the following css statements
-fx-background-image: url("image.png");
But now I want to package my images and css into a directory structure.
So when running inside eclipse I have the css and images in bin
so
bin/name.css
bin/images/image.png
So I change the url to
-fx-background-image: url("images/image.png");
It does not load.

Checked it in my own project (eclipse too), its working for me!
Is your CSS actually loading?
Maybe you can provide the code, where you are loading the CSS?
In your case it should look somethink like that:
scene.getStylesheets().add("name.css");But I wont suggest to add the images and css directly into the bin folder, because the next "Project clean" will delete your files!
I would suggest to add another source folder to your Build Path. I have my java source files in "src/main/java" and the resources (images, css, fxml ...) in "src/main/resources"!
than you can load your css by the following code:
scene.getStylesheets().add(this.getClass().getResource("/name.css").toExternalForm());Edited by: BurnedToast on 01.02.2012 10:52

Accessing ressources (css,images, scripts...) in portal archive via URL?

Hello!
I have created a par file with the following PAR-Archive:
*.par
¦
+---meta-inf                Automatically generated.
¦
¦                           All files and folders in the root folder are deployed as public. This usually includes resources,
+---images                  images,
+---css                     css,
+---scripts                 JavaScripts etc.
According to the documentation, you can access all folders in the archive. But in which way??? The URL looks like this:
http://bbmag34.bbmag.aldi.com:50000/irj/servlet/prt/portal/prtmode/preview/prtroot/pcd!3aportal_content!2fALDI!2fcom.aldi.extranet!2fcom.aldi.iviews!
2fcom.aldi.extranet.iview.flex-integrator-text <- i tried to add !2fscripts!2fhallo.txt (which i copied to the scripts directory) but nothing happened.

Hi Björn,
maybe this will help...
public static String getImageUrl(IPortalComponentRequest request) {
          HttpServletRequest httpRequest = request.getServletRequest();
          StringBuffer buf = new StringBuffer(1024);
                                String prot = (httpRequest.isSecure()) ? "https://" : "http://";
                                buf.append(prot)
                                  .append(httpRequest.getServerName())
                                  .append(":")
                                  .append(httpRequest.getServerPort())
            .append(request.getWebResourcePath())
                                  .append("/images/");
          return buf.toString();
Regards,
Jens

Html, css, images import to indesign

Hi,
i have one html file with a css file and medias (images)
i need convert this file to InDesign file.
How can i do it ?
Please help. Thank you.

Easiest way is to open it in Word, save as DOCX and place that.
Don’t expect perfection.
Bob

CSS Images

Similar Messages

Maybe you are looking for