Jump to content

Archived

This topic is now archived and is closed to further replies.

superlativo

Custom my theme

Recommended Posts

superlativo
First of all thanks for the DMS project. I have a question. When we edit box elements "Styling classes" and do not understand how to enter custom code css is it?
 
Could you give me an example?
 
1024x768.png?size=10249&mime=image%2Fpng
 
There are two things I want to do:
 
1. The Section "Highlight" has two lines of text and default size for the first it's very big. If I edit in Global /Typography size for "Text headers" the second line is very very small.  that css custom How to put bigger?
 
2. I want to add height to the top nav.
 
How do I customize the code in these cases?
 
Thanks in advance.

Share this post


Link to post
Share on other sites
suburbanite

I'm with you as well. I don't know what kind of code we are supposed to be putting in those styling classes boxes. And what is the difference between editing the styling classes and adding code to the Custom Less Code area? 

Share this post


Link to post
Share on other sites
Rob

To expand on what beardedavenger has added, in the custom classes field, you add the name of the custom class you want to create, not the actual CSS itself.

 

So, if you want to turn the text in a section red, you'd type something like this in the custom class field:  my-text-red

 

Then, when you click the Custom Code option in the Visual Editor, or, from Dashboard > PageLines > Site Options > Custom Code (yes, it's still there like Framework), you'd add something like:

.my-text-red {color: red;}


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
superlativo

To expand on what beardedavenger has added, in the custom classes field, you add the name of the custom class you want to create, not the actual CSS itself.

 

So, if you want to turn the text in a section red, you'd type something like this in the custom class field:  my-text-red

 

Then, when you click the Custom Code option in the Visual Editor, or, from Dashboard > PageLines > Site Options > Custom Code (yes, it's still there like Framework), you'd add something like:

.my-text-red {color: red;}

 

EXCELLENT! Very easy.

 

But I have a question in the Section "Highlight" has two lines of text: Hightlight Header Text and  Hightlight Subheader Text but only one Stylling Classes cell. 

 

How to differentiate between the two hightlishts if I want to edit the style of Subheader?

 

Many thanks to all!

Share this post


Link to post
Share on other sites
Erwan

Hi Superlativo,

 

Just in case you didn't find by yourself an answer to your last question, and in order to mark this topic as solved:

 

 

But I have a question in the Section "Highlight" has two lines of text: Hightlight Header Text and  Hightlight Subheader Text but only one Stylling Classes cell. 

How to differentiate between the two hightlishts if I want to edit the style of Subheader?

 

If you still use the first/basic DMS customization method (http://docs.pagelines.com/customize/dms-customize-options) i.e. Styling Class(es) put in Section Options + class(es) defined in DMS Toolbar → Custom Code  Custom LESS/CSS tab, you could try the method below in order to style differently the Highlight Header Text & Highlight Subheader Text.

 

Add two classes in your highlight section options, e.g. my-highlight-header-text-small my-highlight-subheader-text-small, and add this in the custom LESS/CSS tab:
 

.my-highlight-header-text-small .highlight-head {font-size: 15px;}

.my-highlight-subheader-text-small .highlight-subhead {font-size: 13px;}

 

Please note: this code overrides (for this section, globally or locally depending on where you use this section + where you apply these two custom classes) your Global Options \ Typography \ Text Headers \ Base Font Size setting (which is used by both Highlight section texts).

Please note: it's of course possible to make this font size override 
proportional to the global font setting but that's an another matter ;) 
 

Hope it will help and please be kind enough to tell me if it works for you.

 

 

Share this post


Link to post
Share on other sites
Rob

@Erwan  thanks for pitching in to help!

 

@superlativo  I recommend using Firebug for Firefox (www.getfirebug.com) and opening a Firefox window to view and inspect your site. If you use it correctly, you can inspect almost any CSS in the site, test changes, then copy the changed CSS from Firebug to your DMS Custom Code area you have open in Chrome.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
superlativo

Erwan and Rob very thanks for your tips!

I have solved my problem.

 

Best regards.

Share this post


Link to post
Share on other sites
Rob

Excellent!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

×