Jump to content

Archived

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

Leonardo da Vinci

How to add this style in DMS2- CSS box ?

Recommended Posts

batman    389
batman

Hi Leonardo da Vinci

 

Please, you can try with 

 

.pl-content style that I made}

 

If you want to apply this to one section the code is

 

.you-want .pl-content style that I made}

 

Then you write in the "styling classes"

 

you-want (without the dot)

  • Like 2

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
GetMeWebDesign+    115
GetMeWebDesign

Leonardo da Vinci

 

For that specific styling then try this.

 

In your </> Custom in DMS editor or in WP admin > Pagelines >DMS Fallbacks > Custom LESS, add this code

 

.mystyle {

  border-top: 2px solid #FFa500;

  padding-top: 10px;

}

 

Save LESS or refresh/ publish. 

 

In the DMS section editor, under Standard Options > Custom styling classes add (without the dot, as Batman says)

 

mystyle

 

or just to reference that specific section then use the section id in your </> custom or in WP admin > Pagelines:

 

#pl_areau8d814 {

  border-top: 2px solid #FFa500;

  padding-top: 10px;

}

  • Like 2

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

HI,

 

I am not entirely sure what you're asking to be honest. It seems like you're new to CSS and not sure where or how to add it to DMS and make sure the CSS is going to work for a specific element ?

 

If that is the case, the first thing you need to do is read up about CSS, get a basic understanding. CSS is relatively easy to learn and once you have a basic understanding, you can become rather adept using it in no time. I would recommend reading the resources here - http://www.w3schools.com/css/DEFAULT.asp

 

Once you understand the basics, you should sign up to Code School and do their introduction to Dev tools (the Web developer tools from Google Chrome), the tutorial/interactive guide is really awesome and will have using the Dev tools like a ninja in no time. https://www.codeschool.com/courses/discover-devtools

 

Now that you have both a understanding of CSS and how to use Dev Tools, you simply want to take the skills you've learnt about CSS and use then in Dev tools. By doing this, you will see your changes on the fly in your browser. Once you're happy with how this looks, you can either copy these changes to your Custom optional panel in the DMS toolbar or use a Child theme and add your CSS to the child themes style.css or style.less file.

  • Like 2

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Leonardo da Vinci+    3
Leonardo da Vinci

Thanks for all of you 

I have a little bit knowledge about CSS , but what I wanted to ask is how you know this element for this style . in other word how you know  that 

{

  border-top: 2px solid #FFa500;

  padding-top: 10px;

related with . pl--content 

I cannot see it in firefox !

 

How to know is this element.style relate with ..................... ? I face this issue mane times 

 

Thanks a lot for your help :)

Share this post


Link to post
Share on other sites
GetMeWebDesign+    115
GetMeWebDesign

Leonardo da Vinci - It is following the html script. What I suggest you do is (using your jpg as an example) select <section id=pl_areau8d814.....data-object=PLSectionArea"> by left clicking and then right click and copy html and add to notepad. There you will see how that html is read and its flow... as in this short video http://screencast.com/t/nJ2jG7se2

 

Please excuse the amateur nature of this video, but I hope it helps, as I add CSS to the Custom Styling CLasses, Inline Styling and </> Custom area of the DMS live editor: 

https://drive.google.com/file/d/0BwQ0BdDvWmfjUU1heHRIMlFOUmM/edit?usp=sharing


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

When you view styles be it in Google Chromes dev tools, FireBug or similar tools, whenever you see element style and some CSS properties. Element style generally means that, that element has inline styling, which you can see on your screenshot in your fist post. Look at your image again and you can see the styling, as it looks like this:

 

<div class="pl-content " style="border-top: 2px solid #FFa500; padding-top: 10px;">


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Barnaby Skinner
      By Barnaby Skinner+
      Hey all, hope I worded the topic correctly!
      I just need to know if either 1) I'm making a mistake or 2) this could be set as a new feature?
      Using the global settings typography parameters, I have a global paragraph font type (set using googlefonts) and have set the style to align:justify. When laying out <p> text inside a simple TEXT module, the <p> text adheres to both the font type and justification. Perfect.
      Now, when I set <p> text inside the PARAGRAPH TEXT field within an ELEMENT module, the <p> text adheres to the font type, but not the justification. It's rather annoying as I like to fully justify para text across the board and tend to use Element modules instead of text boxes for various reasons. It also seems silly that some PARAGRAPH TEXT fields adopt global settings, whilst other don't.
      Or I'm doing it wrong :S
      Any help or advice is much appreciated!
      Cheers
    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
×