Adding css class styles to images

I have a page template created with css that I would like to
allow my users to add images, and based on the style selected, have
the image appear to the left or right of the text. Is this
possible? I see that when I insert the image into the page, it
applies a <p> tag, but when I select the image in Contribute
Edit mode, the styles list does not display so I'm stuck with an
image in the middle of the page with text only above and below. Any
words of wisdom would be appreciated. Even to know it can't be
done.
Thanks!

To add a style to a graphic, click the graphic and go to
Format > Style - then select whatever you named the style

Similar Messages

Reg: Passing Image url through CSS Class

Hi,
How can i pass the image through Css class ?
Thanks in advance.

Hi,
I am not sure if that can be done in css file though.
I suppose you are using the backing bean for setting the skin (just read your old thread). If yes, you can add two images to your page and set the visible property according to the current skin. Something like
<af:image id="i1" source="../images/first_logo.gif" visible="#{seesionScope.currentSkin == 'First'}"/>
<af:image id="i2" source="../images/second_logo.gif" visible="#{seesionScope.currentSkin == 'Second'}"/>
If i select Second CSS file then the logo will be change according to the style class defined in First CSS file .AFAIK, the company logo would be static ;) .
-Arun

CSS Questions :: Renaming Class Styles & Replacing Styles Globally

1) Renaming Class Styles
I have a large website that I redesigned over a year ago and now manage. I've been doing some housekeeping and attempting to rename some of the class styles I've applied to different parts of each page.
Problem: When I change the name of a class style, the style no longer is applied to the text. I've tried this in both GoLive CS2 (8.01) and Dreamweaver CS3. It's the same with both. They both allow you to change the name, but then the text loses the connection to the class style.
How can I rename the property (or style rule) without losing the connection to the text it is applied to? To go through and have to reassign the newly named styles to each section of each page would be an enormous undertaking.
2) Replacing Styles Globally
Is there an easy way to delete a style and chose a new one to take it's place globally?
Thank you for any help you can offer!
Linda

Hi Nate,
Thanks for the suggestions!
> In CS2, The CSS tab on the left side of the site window is handy for that. For instance, if you want to change very instance of a class to a different name, find it in the classes list and rename from there, which should update any pages using the class, and update its name in any external CSS files. Really useful for global changes, but definitely one of those things worth making a back-up of the whole site first.
For some reason when I do this it breaks the formatting style.
> If you want to change any references to one class to references to another, go to the same place and just change the class name to the other class name (so, you'd temporarily have 2 items in the list with the same name). Then, if you refresh view, you'll see they've really been consolidated into references to the same class. If that makes sense.
This does make sense.
I'm still experimenting. I may need to resume this in the morning. I'll let you know how it goes.
Linda

Export to Fixed_Layout EPUB: Paragraph Styles not exporting to CSS class tags

Hi,
As it says, my Paragraph Styles aren't exporting to CSS class tags with a Fixed Layout EPUB.
...But Object Styles are working ok.
Seems to work ok when exporting to HTML or Reflowable EPUB... just not Fixed Layout.
Any ideas?
Cheers
Forgot to say: Mac OSX 10.8(?) Adobe Indesign CC 2014

Hi... it was 10.0.7
Updated to 10.1 & wahoo - it works now.
Will mark your answer correct as it prompted me to update.
Cheers

Adding custom css classes from within edge animate

is it possible to add CSS classes from within Edge Animate, im not talking about adding your own stylesheet by ex. manually editing the .html document, but rather adding classes via ex. the code window ?, it would be immensely helpful to have everything in one place.
any suggestions on this one ?

Yes - you can use addclass() and you can use UI.
1- UI
Select elements in elements panel. Click the C button in the property panel.
Use this for example
sym.$('.classname').css({'color':'red'});
2- addclaas()
sym.$("name').addclass('classname');
Use same as above.
On Sat, Apr 25, 2015 at 8:56 AM mads18950258 <[email protected]>

Save as SVG, with character styles included as CSS classes? (CC)

Hi, I know that
a) Character styles in Illustrator CC are saved as CSS classes in the CSS properties menu, with appropriate style info;
b) These classes can be exported to a CSS file from the CSS properties manual;
c) Graphic styles can also be saved as CSS classes; but
d) When saving to SVG (with Style Elements option) the graphic style classes are included in the SVG code, but NOT the character style classes. Instead, it uses classes like ".st0", ".st1", etc., which separate each styled attribute (font-family, size, etc.) into its own class.
Is there any way around this problem, short of extensively editing the svg code by hand later? The end result we're looking for is an SVG where text has classes assigned, based on character styles. (Ideally we'd then link to an external style sheet in order to modify based on the end use of the SVG. So for example a graphic with .textBold and .textRegular, where those classes are later assigned different values based on the delivery device.)
Has anyone else dealt with this issue?
Thanks!

Hi Ianmcarey,
Thanks for the detailed Explanation. We will investigate this Requirement of Exporting Character style classes in the SVG code.
Thanks and Regards,
Mohit Gupta.

SPACES custom skin CSS Class reference ? which css styles do what?

I am creating a custom skin for spaces using the Extend Spaces custom project. I am not able to find which css class names are mapped to which elements of a page in spaces. Inspecting the code does not help since the css class names seem to be autogenerated names and don't really match any names in the example "myskin" or any others I have seen.
Does anyone know of a reference that shows which classes correspond to which elements in spaces?

http://www.oracle.com/technology/products/jdev/htdocs/partners/addins/exchange/jsf/doc/skin-selectors.html
This is an overview of the selectors used in ADF. I think webcenter spaces only uses these. You should be able to skin your webspace using these selectors.

DIV Style background image not showing

Hey Friends - can anyone take a look at line 136 to show why my background-image is not showing in this DIV Style?
http://www.gratefulcreative.com/Andre_Madiz/index.html
Thanks in advance!
ken d
creative director
grateful creative
www.gratefulcreative.com

You have no width or height set for that element so it can not show an image unless you make the div at least the same size as the image.
<div style="background-image:url(http://www.gratefulcreative.com/Andre_Madiz/images/bottom_text.png);ba ckground-repeat:no-repeat; width:871px; height:483px;">
You may also want to consider adding this to your main css file and giving the div an id which will help you out in the future.

How to add styles to image in XML view ?

Is it possible to add styles to Images in XML view ?
<Image alt="alternate text " src = " " />
I tried adding sytle= "align : right " but its not working. I just want to align this element in the view to the right.

Hi Micheal,
Pleas see the below code.
View:
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="testing.imageXml" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Image">
<content>
<Image id="img1" alt="alttextimage" src="images/img1.jpg" />
</content>
</Page>
</core:View>
Controller:
onBeforeRendering: function() {
this.getView().byId("img1").addStyleClass("myimage");
Index.html :
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.ui.commons"
data-sap-ui-theme="sap_bluecrystal">
</script>
<script>
sap.ui.localResources("testing");
var app = new sap.m.App({initialPage:"idhome1"});
var page = sap.ui.view({id:"idhome1", viewName:"testing.imageXml", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
</script>
<style>
.myimage{float:right !important; width:300px; height:200px;}
</style>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Output :
Regards,
KK

Do you guys know where to populate the CSS class items on the WYSIWYG Editor as shown below?

Do you guys know where to populate the CSS class items on the WYSIWYG Editor as shown below? We're trying to make it easily for the client to apply formatting by selecting the CSS Class on the list.

The Page Template must contain a reference to exactly one stylesheet.
That single <link rel="stylesheet"> tag must be directly in the <head> section of the Page Template, not in any content holder.
The class to be added cannot have a selector any more complex than a single class. E.g., this is fine:
.button {
     background-color: red;
     padding: 5px 10px;
This will fail:
.content .button {
     background-color: red;
     padding: 5px 10px;
The classes to be added must each be added to the list in the Partner Portal (Partner Portal › Tools › Online Editor Settings › select your site from the dropdown › Editor Apply CSS).
With caching disabled, the above changes will be visible when you change a page's Template and answer 'Yes' to the 'Do you want to reload?' alert box.
More info here: CSS Styles are Missing in WYSIWYG Editor

Stylesheets with CSS classes included in springboard possible?

Hey there.
Is there a way to include a CSS stylesheet in my custom made springboard?
I can include them in features but don't know how to import external files to the custom springboard (amx page)..
Regards,
Pascal

Hi, Pascal, actually let me add to this thread so everyone can see this.
Yes you can leverage CSS in custom springboard and custom login screen. If these are HTML based, you would just simply include the CSS with your HTML page. If these are AMX based, you would need to follow the SkinningDemo to either extend or add new style classes. Look in the ApplicationController project - Application Sources - META-INF - adfmf-skins.xml file. This contains references to additional CSS classes that can be used in the entire app. Since springboard and login page are application level artifacts, these CSS/skinning files will need to be added in the App Controller project per the sample.
Quick explanation of the adfmf-skins.xml file since I was not clear in this morning's call. You can either modify the existing CSS classes shipped with the framework, or add new CSS classes to the framework. To modify (or extend) - for example, to change the header facet's outputText color to red, you would first add this to the skins.xml file
<skin>
<id>mobileFusionFx.iOS</id>
<family>mobileFusionFx</family>
<extends>mobileFusionFx</extends>
<style-sheet-name>css/mycss.css</style-sheet-name>
</skin>
Then in your mycss.css file, you would have:
.amx-panelPage-facet-header > .amx-outputText{
color: red;
If you want to add a brand new CSS class and then use it in your app, you would:
<skin-addition>
<skin-id>mobileFusionFx</skin-id>
<style-sheet-name>css/myaddedcss.css</style-sheet-name>
</skin-addition>
And the myaddedcss.css would have the following new class that you can now use in your app:
.MyCSSClass {
color: green;
This would work against the entire app, including springboard and custom login app built using AMX.
Thanks,
Joe Huang

How to use CSS Class

Dear Friends,
I am using Apex 4.1. i have made a below CSS class. i just want to know where i have to paste the below code and from where i have to call it and how?
I have written this in PAGE Properties-->HTML Header
<style type="text/css">
myclass
width:200px;
color:orange;
background-color:#CCCCFF;
</style>
calling above on field --- > on HTML Table Cell Attributes. class="myclass"
but it is not working. Please help me where i am doing wrong. Thanks in advance.
Regards
Kamran

Hi Jozef,
Thank you so very much for you kind help and consideration on the said issue.
The issue is resolved.
i just copied and pasted ur code. now its working. now i have ur email. if u dont mind could i send u mail directly at ur email address if any issue.
Thanks once again.
Regards,
Kamran

Error with list styles using image bullets

I cannot use list styles with image bullets in the mapping of
Framemaker documents. If I define and map a format with image
bullets, then Robohelp creates the correct HTML/CSS code but during
the Webhelp output forgets to copy the used image files to the
required locations. It is possible to manually copy the image files
into the output then the webhelp displays correctly but this is no
possible process for us on a regular basis.

Hi
It's to hard to Mind-Read.
What did the Error Message say ?
You are aware of the 99 photos per SlideShow limit in iDVD ?
I do My SlideShows in
• iMovie HD6 (or FinalCut) or
• FotoMagico
as there are less limit's here
Yours Bengt W

Robohelp 8 & CSS Class attribute

I have been trying to use the CSS Class attributes but it doesn't seemed to be recognized by Robohelp 8. Here is an example of my code:
My external style sheet:
Test {
          width: 562px;
          height: 16px;
          text-align: center;
          font-family: Arial, Helvetica, sans-serif;
          font-weight: bold;
          color: #ffff00;
Test1 {
          background-color: #00900;
Test2 {
          background-color: #008000;
In my file:
<link rel="Stylesheet" href="layout.css" type="text/css" />
<div class="Test Test1">
     I type something here
</div>
The text that I type is rendered but none of the formatting. What am I doing wrong?
Does anyone know if there is a problem with Robohelp 8 not supporting CSS classes?
Thanks!
Message was edited by: Lakooli

Hi,
Add a dot (.) before the class definitions in your css:
.Test -> All elements that have the class test
Or even better:
div.Test -> Only DIV element that have the class test
Greet,
Willam

Setting CSS Class for a Text Input Item when the disable property set to true

Hi,
i have OAF page and the item style is Message text input and i have set the disable property is TRUE using SPELL.
i want to display the value is BOLD for the item. so i set the CSS class for the item to OraTipLabel,OraDataText etc using item property or in process request also. the value is not setting BOLD.
the field is gery out and frozen and it is not displaying BOLD.
Please advise for the same.
Thanks
Sreekanth

Hi Avaneesh,
It is still not working for me.
Still waiting for some pointers
Anas.

Adding css class styles to images

Similar Messages

Maybe you are looking for