|
John Fineberg
|
September 17, 2013 at 12:47 pm
Before upgrading EE a couple of months ago, I had a two-column format for laying out upcoming classes. Now I only have one column, which forces site visitors to do a lot of scrolling in order to see what’s available. See this page for an example of what I mean:
http://www.cpr-twincities.com/community/combo
I tried simply creating a two-column format within my theme (Dejavu), but that just produced narrower boxes, not two boxes per row, as I had before.
Do you have any simple CSS code to plug into My Custom CSS?
|
|
Josh
|
September 17, 2013 at 1:23 pm
Hi John,
The code sample in this article can be adapted to work with your theme:
http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/
|
|
John Fineberg
|
September 17, 2013 at 1:35 pm
I added:
<ul id="double"> <span class="code-comment"><!-- Alter ID accordingly --></span>
CSS
XHTML
Semantics
Accessibility
Usability
Web Standards
PHP
Typography
Grids
CSS3
HTML5
UI
Then I added:
ul{
width:760px;
margin-bottom:20px;
overflow:hidden;
border-top:1px solid #ccc;
}
li{
line-height:1.5em;
border-bottom:1px solid #ccc;
float:left;
display:inline;
}
#double li { width:50%;} <span class="code-comment">/* 2 col */</span>
#triple li { width:33.333%; } <span class="code-comment">/* 3 col */</span>
#quad li { width:25%; } <span class="code-comment">/* 4 col */</span>
#six li { width:16.666%; } <span class="code-comment">/* 6 col */</span>
Although it added pale gray lines under all hyperlinks (which I sort of like), I don’t see any change in the way my offering lay out.
|
|
Josh
|
September 17, 2013 at 2:17 pm
Hi John,
You’ll need to adapt the code, not copy the demo example wholesale.
If you require the services of a developer to help you accomplish this, please see our list of recommended developers:
https://eventespresso.com/developers/event-espresso-pros/
|
|
John Fineberg
|
September 17, 2013 at 2:26 pm
Sorry, I misinterpreted the instructions. I thought it was just going to be a simple script to make it into two flowing columns.
Which part of the script added the pale gray lines? I’d like to delete all of the CSS code except for that. They’re in the top nav menu, the widgets in the right sidebar and the footer, and they make those sections stand out better.
|
|
Josh
|
September 17, 2013 at 3:05 pm
The border-top and border-bottom styles will add lines.
|
|
John Fineberg
|
September 17, 2013 at 3:20 pm
Can you be more specific? If I can isolate the lines to just the sidebar, that would be wonderful.
|
|
Dean
|
September 18, 2013 at 4:03 am
The code
ul{
width:760px;
margin-bottom:20px;
overflow:hidden;
border-top:1px solid #ccc;
}
li{
line-height:1.5em;
border-bottom:1px solid #ccc;
float:left;
display:inline;
}
contains border-top and border-bottom rules. With that code those borders will be applied to every UL and LI tag on your site as they are none specific.
You would need to check your themes sidebar styles for the correct ID’s or classes if you wanted to apply them just to the sidebar.
As Josh mentioned, if you require the services of a developer to help you accomplish this, please see our list of recommended developers:
https://eventespresso.com/developers/event-espresso-pros/
|
|
John Fineberg
|
September 18, 2013 at 8:20 am
I plugged that into My Custom CSS and got this warning: “Are you sure you want to do that? Try again.” Then I tried just this part and got pretty much what I was looking for:
li{
line-height:1.5em;
border-bottom:1px solid #ccc;
float:left;
display:inline;
}
As you suggested, I think I’ll check with my theme developer, as it seems to be more up their alley anyway. Thank you, Josh and Dean!
|
