Jump to content
stevenpeeters

How use CSS for a contentbox

Recommended Posts

stevenpeeters

Hello, I'm trying to customize the CSS of the contentbox of a certain page, but I can't find any information how to use the feature: "Content Box Class Applies this class to the content box for individual styling" In my contentbox I added a table and I want to change vertical-align: baseline; to vertical-align: baseline. (baseline was set by default) I tried to find the css selector with firebug and use the Pageline customize plugin. So my questions are: What is good way to find the CSS selector for the contentbox? How do use the contentbox class? Do I still need the Pagelines customize plugin? How and where can I use CSS for a certain contentbox. Best regards

Share this post


Link to post
Share on other sites
msaizan

ditto on the general question... I too would like to use the content boxes but not clear what the classes are or how to apply these?

Share this post


Link to post
Share on other sites
Danny

Hi, Simply add a word without a . so for example in my screenshot below, I add Test-class and nothing else. Once you have added a class to the class input field area, you should see something like this in your developer console: hMH2b.jpg You can then use this class to style the contentbox how you like.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
msaizan

ok but what are these classes? are they css classes? or something specific to Pagelines? i am sorry i am making this difficult but i am just not computing yet - no pun intended!

Share this post


Link to post
Share on other sites
msaizan

I am really not "getting" what this context box does that you can't do in the normal WYSIWYG editor on a page. what i am missing here? maybe if somebody could send me a link to a page with a styled content box on it i would get it - web techs are kinda visual ya know...

Share this post


Link to post
Share on other sites
msaizan

ok. i am starting to get it - the content boxes can go in a lot of different areas...

Share this post


Link to post
Share on other sites
Danny

Hi, The class are created by you, so you can style the content box content with CSS. Content boxes are for adding standard content, this includes HTML.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
msaizan

ok big D...still wrangling with content boxes. How come if i put a content box in my header and add content to the box..that content only shows up on the blog front page - BUT/AND on perma posts and category posts its just an empty box there? Some extra documentation on this thing would be great! i am sure it's me but as it turns out I am kinda dense when it comes to these boxes. they just aren't happening for me. Here's what i am not tracking. If you drag a widget into a sidebar - like the Universal Sidebar for example - and you put the Universal Sidebar in the header, for example - that content is going to display globally across all of pages of the site. Why is that not happening like that with the content boxes? Should it happen that way? i thought anything you put in the header was viewable across the whole site unless you suppress it intentionally? Sign me, Still Missing Somethin'

Share this post


Link to post
Share on other sites
revoltoid

Its not just you msaizan, many users have no idea what to do I guess. My question is similar. Once I created the class, how do I stylize the CSS? I dont see anything related to the class (CSS selectors they are called maybe, I dont know) in the CSS that pops up in Firebug when selecting the content box area? Its 9th of January. Why does noone answer msaizan's 4 days old questions?

Share this post


Link to post
Share on other sites
stevenpeeters

Just found out that when declare a class for the contentbox you don't have to set a .(dot) in front of it. But when you want to customize the class you put the .(dot).

Share this post


Link to post
Share on other sites
revoltoid

and how do you customize the class? what css selectors do you use, and where do you put the code? I dont see any css rules regarding the contentbox in firebug. i can see the class appearing in html codes, but nothing in the css section.

Share this post


Link to post
Share on other sites
stevenpeeters

I installed Pagelines Customize plugin. When installed go to plugin editor, select Customize Plugin. Then select the Pageslines.customize.css file. There add the .class-of-your-contentbox add the CSS you want Hope this helps

Share this post


Link to post
Share on other sites
stevenpeeters

I meant pagelines-customize/style.css iso Pageslines.customize.css

Share this post


Link to post
Share on other sites
revoltoid

thanks Steven, does it look like this?: lets say i create a class called 'boxtest' then i add something like this to my customize plugin?: .boxtest {background: #00ff00;}

Share this post


Link to post
Share on other sites
revoltoid

all right, tried it and works, thanks. didnt have any idea how to operate this, would be great to have documentation on things (or maybe links to docs?) as I guess most of the 'drag and drop' crowd including myself has no idea how to do things like this. thanks again for your help steven.

Share this post


Link to post
Share on other sites
stevenpeeters

I took me some time to find out. Now I know it's easy to make static pages with contentbox. And indeed, not a lot of info about it

  • Like 1

Share this post


Link to post
Share on other sites
quipmaster

Ok, thanks for the discussion here. I too am stuck on content box. If I understand this correctly, is Step 1 plugins>editor>pagelines customize>select css>pagelines-customize/style.css Step 2 go to /* = Start Your Custom CSS Here = Step 3 add some code like this ".boxtest {font-family : inherit; font-size : 68px; color : rgb(88, 69, 40);} */ Step 4 pagelines>meta>content box then in the content box class type this in and insert .boxtest in the class section Am i missing something? P.S. when i go to pagelines-customize/style.css it says inactive on top but when i check installed plugins it says that is activated? What am I missing, again. Thank you everyone Luis

Share this post


Link to post
Share on other sites
stevenpeeters

Almost correct, in Step 4 you have to omit the . (dot) So in "Content Box Class" it is boxtest iso .boxtest

Share this post


Link to post
Share on other sites
derektrex

how does one customize the background color around the content box?

Share this post


Link to post
Share on other sites
jankoby

Thanks Luis for the instructions to use content box as I am also struggling. I also don't understand why pagelines-customize/style.css says inactive on top but installed plugins says that is activated? I tried your example and it did work in styling what I added in the pagelines-customize/style.css.

 

However, I am trying to resize the content box on a page using the Content Box Class but this does not work.

 

I am fairly new to Pagelines and I  have been adding all my custom CSS in SIte Options > Custom Code. Should I be adding it all to the pagelines-customize/style.css instead?

 

Thanks for any help.
 

Share this post


Link to post
Share on other sites
jankoby

Thanks Luis for the instructions to use content box as I am also struggling. I also don't understand why pagelines-customize/style.css says inactive on top but installed plugins says that is activated? I tried your example and it did work in styling what I added in the pagelines-customize/style.css.

 

However, I am trying to resize the content box on a page using the Content Box Class but this does not work.

 

I am fairly new to Pagelines and I  have been adding all my custom CSS in SIte Options > Custom Code. Should I be adding it all to the pagelines-customize/style.css instead?

 

Thanks for any help.

 

I have succeeded by adding boxtest in the Content Box class, and then adding the custom CSS for that box in the SIte Options > Custom Code.

 

Still question why pagelines-customize/style.css says inactive when it clearly is active and working?

 

Cheers.

Share this post


Link to post
Share on other sites
James B

Hi Jankoby

 

You can place your css in the custom code box, that's fine :-)

 

Once you've named the class for the contentbox you'll just need to follow that with the selectors you want to target.

 

For this example i've left it as contentbox, but if you've renamed it replace with your chosen name etc. So say you want to target the padding of the container pad. Using firebug you can see the class for the #contentbox is .section-contentbox and the container inside is called .hentry-pad.

 

So the css would be

 

.section-contentbox .hentry .hentry-pad { padding: 0 0 25px; }

If you're looking to change something else inside the container, like the width/height, you can new css instructions to the class.

 

.section-contentbox { max-width: 100px; }
 

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

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


×