Custom CSS and Style CSS

[RiverRat 4]

Hi I am totally new to Pagelines and trying to figure a few things out. I am wondering how to do custom css. Specially use the styling classes box in the Edit box of a section or text box. Can you give me an example. I want to make the top right text in the header white and bold. If someone can give me directions on that I can customize the rest of the site as I do know CSS to some extent. http://buff.ly/GWcrIo

 

Also does anyone know what I have to adjust? The left logo image has too much space on the bottom, but has 0 margin? same with navigation. I would like to tight this layout . Thanks

[Danny+ 1,327]

Hi,

 

There is a docs page that covers how to use the style classes field which you can see here - http://docs.pagelines.com/tutorials/section-area-styling

 

You should also check out our how to customize section - http://docs.pagelines.com/customize/how-to-customize

 

I would also recommend checking out the free course over at Code School for Google Chromes web dev tools, after doing this awesome course, you should be a Chrome web dev tools ninja.

 

https://www.codeschool.com/courses/discover-devtools

[RiverRat 4]

Obviously I am missing something reading those articles.

 

Specially use the styling classes box in the Edit box of a section or text box. ----- I want to make the top right text in the header white and bold. If someone can give me directions on that I can figure out how it works. http://buff.ly/GWcrIo

 

There is also a space below the logo I can not get rid off to move the menu up. It looks like there is something around the image, but I can not find it?

[Jake 74]

Hi satinfeather99 - For your particular example, where you're looking to bold and change the color of that text box, you would first enter the following in the Custom Code section of the DMS visual editor:

 

.myheader {font-weight: 800; color: #FFFFFF;}

 

Then, in that particular textbox, in the Styling Classes section you'll add the following (WITHOUT the period (.) in front of it:

 

myheader

 

Publish those changes and you should be good to go!

[RiverRat 4]

Perfect. Thank you

[RiverRat 4]

I need to tight the area below my logo and also below the menu.

 

Do you know why I can't seem to do that using margin and padding or which specific area to lookin? http://buff.ly/199iKRR

 

Thanks!

[Danny+ 1,327]

Hi,

 

All sections come with some padding and margin, without it they would be to tight together and therefore, look rather odd.

If you wish to remove margin/padding from a specific section, you will need to use custom CSS. Please bear in mind that we do not provide extensive custom CSS support, if you need CSS support you will most likely need to sign up to a CSS specific forum.

You can also do the changes yourself, if you're unsure or not currently comfortable using CSS. I recommend you do the following:

 

Read up on CSS, there are a number of awesome resources out there, such as:

 

* W3Schools - http://www.w3schools.com/css/

* Codec Academy - http://www.codecademy.com/tracks/web

* Code School - https://www.codeschool.com/

 

You should also use Google Chrome, when inspecting elements via the Web Dev tools, you can learn more and become a ninja with it in no time using the free code school course - https://www.codeschool.com/courses/discover-devtools

[RiverRat 4]

Hello, I do know a fair amount of CSS it is your program I am getting to know as I have under very tight deadlines and going through a learning curve with this product which has put me behind in my projects by about a week. I see you help others with their problem instead of sending these emails to go read information which I have already read by the way, and it has not answered by questions. All I am asking for is a quick answer so I will know  and apply it to other designs and make sense how to do everything else. I have already read you information but have questions....you posted this to help someone else which answers all my questions but my very important logo problem

 

Is Awesome!

• 
• Moderators
• 
• 9527 posts

• @Mention
• LocationManchester, UK
• Country: 

Posted 15 October 2013 - 03:48 AM

Hi,

 

You will need to add the following code and also increase the width of your Branding image, as it is now no longer wide enough to fill the area.

 

 

#site #branding .content-pad {
padding: 0;
}

#site #feature {
margin: 0;
}
 

What additionally I want to know is WHY there seems to be a space below my logo. I have tried everything to get rid of it. It is in a media box http://buff.ly/16iU7UK

 

Shoot i don't even see how you post picture in this post and I have clicked everything. When switching over to a new product like this when designers are so busy right now, it would be nice to answer our questions instead of directing us to articles we have already read but do not answer our questions...very frustrating.

 

So I see the answer you have posted before for someone else just learning the program. I just want to know how and where you get rid of the space below a media box or text box. If I can not answer this I  can not continue with this theme because this is a big problem for me right now. Thanks so much http://buff.ly/16iU7UK

[Rob 547]

Try adding this to your custom code:

#header .alignleft {
    float: left;
    margin: 0 1.5em 0 0;
}
#header .pl-area .pl-section .pl-section > .pl-section-pad {
    margin-bottom: 0;
    padding: 8px;
}

This should work.

[RiverRat 4]

Thank you so much!!! That did work and allows me to breath and get on with the rest of my sites and helps me to figure out how everything works....I do think that once I get through some minor growing pains with this program it will make designing Wordpress templates faster. 

[Rob 547]

No worries.  You'll find that Firebug for Firefox is a very helpful tool.  http://www.getfirebug.com

[RiverRat 4]

I know unfortunately I have gotten an ad virus on the browser and it is in my system. Virus software not picking it up because it is in the system. Firefox is completely closed down. Only Chrome will work. Even if I delete and reinstall. So I have to reformat and I am installing Windows 8. Just need to catch up on these websites then it's a day doing computer maintenance. 

 

I do miss firefox and have to look into the tools Chrome has.

[Rob 547]

Try running this tonight http://housecall.trendmicro.com/

[RiverRat 4]

Great! If that is a good one I will try it. I have not heard of that one? Thanks for the info!

[Rob 547]

You're very welcome. That one's free, and very comprehensive.  It will find any serious problems.