24 replies to this topic

[marshallsolutions]

I have a client who wants the boxes section to look different than out of the box.

• Although the box is formatted with a bullet list, the display on the site does not show bullet points.
• There are only 2 boxes on a given page. The first is left justified and the 2nd is around the center leaving alot of white space on the right. The customer wants them centered.
• The titles of each of the boxes the customer wants to be larger text (i.e. H1) and underlined.

What is the best way to accomplish the above?

Thanks.

[marshallsolutions]

Also, I'm using the Base theme as a child theme... I tried editing the CSS as follows but it did not do anything different. Still no bullet points. Size of titles are not any bigger nor underlined titles. I also tried the CSS code changes in the custom section of site options and no effect different than before.


#boxes .content-pad{padding-bottom: 5px}
.fboxtitle h1{
padding: 0 0 .4em 0;
font-size: 2.3em;text-decoration:underline;
}
.dcol-pad{ padding: 10px 0; }
.fboxes p { margin: 0; margin-bottom: 10px; }
.fboxes ul {
list-style-type: circle;
margin-top: 5px;
}

.fboxes ul a {
text-decoration: none;list-style-type: circle;
}
.fboxes a:hover {
text-decoration: underline;
}

.fboxes #searchbox {
padding: 1px;
width: 160px;
}

.fboxes li {
margin-bottom: 5px;list-style-type: circle;
line-height: 17px; /* Required for cross-browser consistency; cross-browser defaults vary. */
}

.inline_thumbs .fboxgraphic { padding-top:5px; }

.top_thumbs .fboxgraphic, .only_thumbs .fboxgraphic{
text-align: center;
margin-bottom:5px;
}
.only_thumbs .fboxinfo{ display: none; }

.fboxinfo{ overflow:hidden; padding:5px 0px 0 0px; }

[Rob]

I believe this one's wrong... .fboxes ul a

You have to include a period as such: .fboxes ul.a

Additionally, putting the list-style everywhere only sets up conflicts.

Please see

Please Login or Register to see this Hidden Content

[marshallsolutions]

The Pagelines CSS style sheet has it as .fboxes ul a (with a space not a period) default out of the box. I changed it to ul.a and still no bullet points. It doesn't make sense that the boxes edit area allows for bullet points and numbered list if they don't work, and neither work as I tried both numbered list and bullet point list. So it would seem it is a bug in programming or incorrect CSS since they don't work. I checked the style.css in pagelines 2.x as well as the base child theme. Both show ul a (with a space not a period).

[marshallsolutions]

additionally, something like a bullet point list that is available in the UI should not have to be adjusted with CSS to begin with. If you offer a bullet list in the UI, it should automatically work without adjusting CSS. My two cents.

[marshallsolutions]

sorry for 3 replies, just forgot additional info... also in relation to number 3 in my original post you will note the .fboxtitle shows h1 and underline which also doesn't work... i even changed the font size from 1.3 to 2.3 and it did not affect the title at all. it is as if any changes to the style.css do not do anything.... so if it's not getting its styling info from style.css, where is it getting it from?

[Danny]

If you wish to add a list to a Box, you will need to create a custom class for your list and add the CSS. This is basic CSS, so there really shouldnt be an issue.

You can even use Font Awesome for example,

Please Login or Register to see this Hidden Content

Boxes dont use the h1 tag, they use h3 instead. If you wish for Boxes to have a h1 tag, you will need to create a child box section.

[marshallsolutions]

@danny... i would have to disagree... why have bullet and numberd lists available in the GUI if it requires custom css. defeats the whole idea of GUI. dont ya think? i was able to create h1 using html tags in the header.

[marshallsolutions]

To clarify, I used <h1></h1> for the box titles in the GUI to get my achieved results. This is fine. But if the content area has a GUI for using bullet points, which works fyi, and so does the boxes in the GUI, then both should work the same way. If there is a GUI for added bullet points, then the display should have bullet points just like in the content. It is assinine to think that boxes require CSS mods and content does not for the same GUI related to bullet points.

[Rob]

First, you're talking with moderators, not developers, so referring to things as asinine is not going to win you anything, especially the help of our team. Kindly mind your words. We work quite hard to help everyone but we draw the line when people are inappropriate.

Box titles have always held the ability to include HTML. The same applies to Feature Slide titles, where one of our examples shows the <small> tag.

Doubtlessly, there's a reason why Boxes do not include bullet points. The reason is that WordPress applies list items to many things in its coding. For example, sidebars, menu items, etc all use lists. If they have bullets then you'll see dots all over your site, so globally, they're hidden. However, nothing would stop you from replacing our boxes with boxes created by WP-Boxer, which I've often recommended.

The boxes are actually a WordPress function and it's a common issue across all themes/platforms and in our case, frameworks that use them. Please see:

Please Login or Register to see this Hidden Content

Also, read this:

Please Login or Register to see this Hidden Content

[marshallsolutions]

@rob... i apologize if you were offended by the word... to me it is interchangeable with many other words such as silly and then bolded... yes i'm aware the box titles can use html tags... but css changes should also work... my source of frustration is that the boxes GUI allows the end user to create a bullet point list and almost everywhere else that has that ability, will display correctly on a website... in the GUI itself, it shows bullet points... therefore i don't understand why it wouldn't also display on the website... I have never seen a sidebar or menu item GUI that has bullet point in the editor... I would think that Pagelines could create the proper CSS codes to display bullet points and numbered lists in boxes since that is a feature available in the GUI... I have tried Danny's suggestion above... no bullet points... I have tried the ideas via the 2 links you supplied... still no bullet points... I have probably spent over 4 hours on just trying to get bullet points to display via boxes on this clients website with no luck... I don't think WP-Boxer will allow me to place the boxes where I want since that is not a section... is that correct?

one of the posts from the first link says: The theme's CSS had disabled all list bullets - unless they were explicitly told to display they didnt. The above tells lists inside the .post DIVs to display the same way as those found within the .article DIVs... so isn't it possible for Pagelines to create the CSS that will display in boxes?

To me, simply changing the CSS as follows should display bullet points:

.fboxes ul.a {
text-decoration: none;list-style-type: circle;
}

[marshallsolutions]

@rob... i tried your wp-boxer idea which does display bullet points... but if that can work so should pagelines boxes... also wp-boxer does not display correctly on a phone when using 3 boxes on a page... it cuts off everything and is no longer readable... so it isn't a good solution to the problem.

[Danny]

What do you mean by "you have added <h1> to the GUI" ?

The ability to adding lists to both Boxes and widgets, is disabled by default, I am unsure the reason for this.

However, you can easy add your own custom unordered list, like I displayed above with code.

The code you have above, wouldn't really do anything, not sure why you say that should work.

Please Login or Register to see this Hidden Content

If you prefer not to add a custom list and wish to use the basic <ul> in a box, you will need to add the following code to your box.

Please Login or Register to see this Hidden Content

[marshallsolutions]

By GUI (Graphical User Interface) I'm referring to the WYSIWYG editor. Such as <h1><u>Title</u></h1>.

I'm not sure also why bullets would be disabled considering the editor has the option to setup bullet points or numbered lists. Seems to me that the editor should not show those options if they are disabled.

i said that it should work because Rob pointed out that the code was wrong using ul a instead of ul.a leading me to believe that was the only error.

The code you gave me was exactly what I was wanting and it works great now. You rock!
Now, the last issue is number 2 from my original post. WP-Boxer does a good job of centering the boxes on the page but is a useless plug-in since it is not responsive on mobile devices. The Pagelines boxes are way over to the left. In fact more to the left than even the content section which leaves lots of white space on the right side when using 2 boxes on a page. 3 boxes works well however but the left box seems too far to the left compared to the content section verbiage. How would you suggest fixing this?

[marshallsolutions]

@Danny... I just noticed that the <h1> tag is not really working... the code on the website shows h1 but the size is still h3 not h1. However the <u> part worked. Why would the h1 not display the correct size?

[Danny]

Can you provide a link to where these boxes are please, so I can take closer look.

[marshallsolutions]

Please Login or Register to see this Hidden Content

the boxes are on the home page, capabilities page and products page.

[Danny]

OK, you can not change the Boxes header by adding <h1> Title </h1> in the Boxes title. As you end up with <h3></h3><h1>Title</h1> in your code.

Please Login or Register to see this Hidden Content

Like I mentioned above, Boxes use the h3 tag for titles, if you wish to use h1 (not sure why) you will need to create a child boxes section and edit the code in section.php.

You could simply change the font-size for box titles to make them larger.

Please Login or Register to see this Hidden Content

Also, the boxes are correctly position, although the text is aligned to the left. If you do not like this, try centring the text for those boxes.

If you do not like how this is displayed when using two boxes. I recommend you create these boxes using the PageLines Grid -

Please Login or Register to see this Hidden Content

Which will give you more control.

[marshallsolutions]

The client is very weird. Personally I don't like how the site looks but they love it. Go figure. They did a mock-up in PowerPoint of what they want the site to look like and we are just following what they want. Yes I noticed the h3 plus the h1 tags in the html. I tried the code you put above but it did not change the size at all. How do I use Pagelines Grid? I went to the link but I didn't see anything that showed where to install it or how to use it.

[marshallsolutions]

the code you put above does work after i removed the <h1> tags from the titles... thanks...