Jump to content
marshallsolutions

How To Customize Boxes

Recommended Posts

marshallsolutions    1
marshallsolutions

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

  1. Although the box is formatted with a bullet list, the display on the site does not show bullet points.
  2. 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.
  3. 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.


Larry Marshall

Share this post


Link to post
Share on other sites
marshallsolutions    1
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; }


Larry Marshall

Share this post


Link to post
Share on other sites
Rob    547
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 http://www.w3schools.com/css/css_list.asp


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
marshallsolutions    1
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).


Larry Marshall

Share this post


Link to post
Share on other sites
marshallsolutions    1
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. :D


Larry Marshall

Share this post


Link to post
Share on other sites
marshallsolutions    1
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?


Larry Marshall

Share this post


Link to post
Share on other sites
Danny    1,327
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,


<ul class="icons">
<li><i class="icon-ok"></i> Lists</li>
<li><i class="icon-ok"></i> Buttons</li>
<li><i class="icon-ok"></i> Button groups</li>
<li><i class="icon-ok"></i> Navigation</li>
<li><i class="icon-ok"></i> Prepended form inputs</li>
</ul>[/CODE]

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
marshallsolutions    1
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.


Larry Marshall

Share this post


Link to post
Share on other sites
marshallsolutions    1
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.


Larry Marshall

Share this post


Link to post
Share on other sites
Rob    547
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: http://wordpress.org/support/topic/ordered-and-unordered-list-not-working-when-viewing-an-article

Also, read this: http://www.arcanepalette.com/tips-and-tricks/fixing-bullet-points-list-items-wordpress/


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
marshallsolutions    1
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;

}


Larry Marshall

Share this post


Link to post
Share on other sites
marshallsolutions    1
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.


Larry Marshall

Share this post


Link to post
Share on other sites
Danny    1,327
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.

.fboxes ul.a { text-decoration: none;list-style-type: circle; }
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.

#site .fboxes ul {
list-style-type: disc;
margin: 15px;
}[/code]

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
marshallsolutions    1
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! :D

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?


Larry Marshall

Share this post


Link to post
Share on other sites
marshallsolutions    1
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?


Larry Marshall

Share this post


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

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny    1,327
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.

http://screencast.com/t/0HXleiLF

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.


#site .fboxtitle h3 {
font-size: 2em;
}[/CODE]

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 - http://demo.pagelines.me/tools/

Which will give you more control.

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
marshallsolutions    1
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.


Larry Marshall

Share this post


Link to post
Share on other sites
marshallsolutions    1
marshallsolutions

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


Larry Marshall

Share this post


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

The link I gave you, as some examples how to use the PageLines grid, click on the Grid menu link and it should scroll you to the grid location on the page.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
marshallsolutions    1
marshallsolutions

Yes I saw the examples. So do I go into the boxes html section and add the html code above the content to move a box to the right using span? That would seem to me to move the text in the box rather than the whole box. Still confused.


Larry Marshall

Share this post


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

No, the PageLines Grid would replace the Boxes. So you add the code for the Grid to your page content editor.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
marshallsolutions    1
marshallsolutions

Ok. Thanks. You can close this.


Larry Marshall

Share this post


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

The topic was marked as resolved.


Please search our forums, before posting!

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


  • Similar Content

    • Audun MB
      By Audun MB+

      Here:http://attac.no/global-ulikhet/
      The images are forced into a boxed frame so that you can't see the whole picture. Doesn't look so good. Is this a bug? A feature? How can I fix it?
    • JudithKlinger
      By JudithKlinger+
      The recent WP update seems to be quite cheeky...messing about with a number of things. 
       
      Having trouble with boxes displaying differently in different browsers.  1st screen shot is Chrom...looks ok. 
      2nd screenshot is Firefox...colors are different. Icons are different. Have weird 1000's next to the icons. Any idea what's going on? 
       
      Thanks!! 
      Judith
       
       


    • richardjacruz
      By richardjacruz+
      Someone reported this little bit of weirdness to me today. They were using Internet Exporer. I used an emulator, and I received the same result. Please see the attached.
      The website is richcruzchicago.com.
      Thanks,
      Rich

    • Susan
      By Susan+
      Everything was fine with my site.
      Suddenly, strange characters are appearing in Boxes. See image. Site page is here. I even tried to add a new Boxes section but the same thing keeps happening, so I deleted the new section.
      How can I resolve this?
      Your help is greatly appreciated.
      Thank you.
       
       

    • claudedagenais
      By claudedagenais+
      Hi,
      Could it be possible to add to the boxes an option so that if an Item has an optional link that we can also optionally make it open in a new windows.
      Thank you :-)
×