BullGuard Antivirus Sale - 60% Off with openElement !
Forum Home Forum Home >

openElement

 > openElement General Discussion
  New Posts New Posts RSS Feed - Common CSS for all pages
  FAQ FAQ  Forum Search   Register Register  Login Login

Common CSS for all pages
 Post Reply Post Reply Page  12>
Author
Message
  Topic Search Topic Search  Topic Options Topic Options
whoit View Drop Down
Groupie
Groupie


Joined: Oct 13 2014
Status: Offline
Points: 55 		Post Options Post Options   Thanks (0) Thanks(0)   Quote whoit Quote  Post ReplyReply Direct Link To This Post Topic: Common CSS for all pages
    Posted: Oct 13 2014 at 10:19pm
I'm used to having single CSS files which contain code for every page on my site. In this way I can create a single instance of a style and use it anywhere on my site.

I've noticed that openElement creates a unique css file for every page - yikes!

How can I create a single 'universal' CSS file used by every page with openElement?
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283 		Post Options Post Options   Thanks (1) Thanks(1)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Oct 14 2014 at 9:00am
Hi,

openElement uses a system of Templates; you can make a base template inherited by every page, and the styles you define there will be used everywhere (page background, font etc.) unless overridden in the pages.

If you need to write your code "by hand", use a Code Block (Source) type CSS position Header. If you do this on a template, all pages based on it will use this code.

Finally, if you really want a global CSS file written by yourself, add to the base template Code Block (Source) type HTML (!!) position Headers, with the code

<link rel="stylesheet" type="text/css" href="Files/Other/myCSS.css" />

(putting it into Files/Other will make openElement publish it automatically, unlike any other location where things are published only when openElement detects direct usage by elements)

If your page is not in the site root, you obviously need to modify the path (ex. ../Files/Other/myCSS.css).

Last technique is mostly useful if you add 3rd-party solutions with scripts (JS/CSS/PHP etc.)

Good day
D
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283 		Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Oct 14 2014 at 9:09am
P.S. I completely forgot another technique: Style Skins; you can use an element to save the integrality of its style as a Skin, then apply it to any other element of the same kind. Then you may simply edit the skin to modify style of ALL elements on all pages of your project. This may prove much more convenient than a CSS file containing all the styles in the form of raw code.
Back to Top
whoit View Drop Down
Groupie
Groupie


Joined: Oct 13 2014
Status: Offline
Points: 55 		Post Options Post Options   Thanks (0) Thanks(0)   Quote whoit Quote  Post ReplyReply Direct Link To This Post Posted: Oct 14 2014 at 1:35pm
First, thank you for the detailed reply!

Everything you mentioned seems reasonable, however I do not see how to implement a 'custom' style.

For example, if I create a custom CSS file, and provide the link within a code block as you suggest:
<link rel="stylesheet" type="text/css" href="Files/Other/myCSS.css" />

how do I implement one of the styles?

If I edit the html code and insert   "style='myStyle'" into an existing item, the style is removed when the html file is re-opened in OE.
(This effect is perfectly explained in this post: http://forum.openelement.com/en/forum_posts.asp?TID=259&title=manual-css-code-input)
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283 		Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Oct 14 2014 at 1:48pm
If you mean applying the style to a specific element or tag:

 - Each drag-and-droppable element in OE consists of several Style Zones, where each Zone corresponds (roughly) to a tag in the element's HTML code; not each tag corresponds to a Zone.

 - You can always look at the element's code in the browser, to see the structure and to determine how to "manually" affect its style.

 - For your convenience, use the Property "Custom classes", like this you can specify your own class(es) that you can use in CSS code.

For example, you want to change the style of the link in the Text Link element, and instead of using openElement's integrated style edition, you want to write CSS manually.

 - You put "link01" into Custom Classes for this element;

 - You open the Code Block with your CSS, and you add the code


.link01           { border: 1px dashed #F0F0F0; } /* border around the element */
.link01 a         { font-family: Arial; color: #808080; } /* link text (<a> tag affected directly) */
.link01 a:hover   { color: #A0A0A0; } /* style on mouse over */
.link01 a:visited { color: #D0D0D0; } /* style if link is visited */


That's all. But I advise you to experiment with Style Skins to compare the methods in terms of convenience.
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283 		Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Oct 14 2014 at 1:49pm
P.S. Do not change files generated by openElement (htm/php, css, (var).js/php etc.), use Code Blocks to integrate custom code. But if you use your own files (like Files/Other/myCSS.css), you can of course modify it freely, it will never get rewritten.
Back to Top
whoit View Drop Down
Groupie
Groupie


Joined: Oct 13 2014
Status: Offline
Points: 55 		Post Options Post Options   Thanks (0) Thanks(0)   Quote whoit Quote  Post ReplyReply Direct Link To This Post Posted: Oct 14 2014 at 2:01pm
Again, thank you!

I've tried the Custom Classes approach and while it works, I have a few more questions:
1) Custom Classes (like the css style) only appear visually when previewing - Is there a way to have them appear visually within the editor? For example I made a test style "color: red" and applied to a text box. The text remained black until I previewed where it then changed to red.

2) Is there a way to see the the available Custom styles which I have defined in my own CSS file from within the Editor - such as in the "Webstyle Preset" pane, or "Shared Style Presets" ?
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283 		Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Oct 14 2014 at 9:05pm
Custom CSS code is not used in the OE Editor (all scripts are "disabled" as it may cause unexpected or even unrecoverable results). And they are not accessible by OE tools either (which is one more reason to use integrated functionnality as much as possible).

As a nasty workaround (I'm not even supposed to suggest it Sleepy), you can temporarily insert your styles into openElement.css (if it's regularly overwritten, you might need to find all instances of openElement.css on your drive and insert the code), this would make them visible in the Editor, though still not accessible by OE tools.
Back to Top
whoit View Drop Down
Groupie
Groupie


Joined: Oct 13 2014
Status: Offline
Points: 55 		Post Options Post Options   Thanks (0) Thanks(0)   Quote whoit Quote  Post ReplyReply Direct Link To This Post Posted: Oct 15 2014 at 1:37pm
So I should really look into Skins as you mentioned before?
Will that allow for custom changes to be seen in the editor?
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283 		Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Oct 15 2014 at 1:47pm
Of course. Once you modify any style property in a Skin, ALL elements using it will update (on all site pages), and the Editor will show them with this new style.
Back to Top
 Post Reply Post Reply Page  12>
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.109 seconds.