• 0

DMS 2 How to add this style in DMS2- CSS box ?


Question

6 answers to this question

  • 0

Posted · Report post

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)

2 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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;

}

2 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

2 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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;">

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now