landing page template – css

[saralaughs]

I have a static front page for the genesis website I'm trying to get into shape. If you look at the page you'll see that the sidebars are at the bottom of the page. You'll also see a variety of widgets in the three footer areas.

For weeks now I have been struggling to isolate the css that will allow me to change the way unordered lists are formatted. You'll see a tiny little dot as the bullet, and a huge amount of space between items. That is the built in css for (apparently) unordered lists in widgets on the landing page.

All I really need is the css code that controls these unordered lists, but despite viewing source and inspecting elements in both Chrome and Firefox, I have got exactly nowhere. Could somebody please point me in the right direction? It seems crazy that I've spent so much time trying to find the css specific to the front/landing page, but there you have it.

Any help much appreciated.

http://thegildedhour.com

[Brad Dalton]

When you say landing page are you referring to the front page?

Most themes include a page_landing.php file and a front-page.php file.

This is the default CSS on line 197 of style.css

ol,
ul {
	margin: 0;
	padding: 0;
}

This is the CSS for widgets

/*
Widgets
---------------------------------------------------------------------------------------------------- */

.widget {
	margin-bottom: 40px;
	word-wrap: break-word;
}

.widget ol > li {
	list-style-position: inside;
	list-style-type: decimal;
	padding-left: 20px;
	text-indent: -20px;
}

.widget ul > li {
	list-style-type: none;
}

.widget ul > li,
.widget ol > li {
	margin-top: 10px;
	padding-left: 20px;
}

.widget li li {
	border: none;
	margin-bottom: 10px;
	padding-bottom: 0;
}

.widget ul > li:last-child,
.widget p:last-child {
	margin-bottom: 0;
}


/*
Sidebars
---------------------------------------------------------------------------------------------------- */

.sidebar {
	font-size: 14px;
}

.footer-widgets .widget ul > li,
.sidebar .widget ul > li {
	border-bottom: 1px solid #ddd;
	list-style-position: outside;
	margin-bottom: 12px;
	padding: 0 0 12px 24px;
	position: relative;
	text-indent: 0;
}

.footer-widgets .widget ol > li,
.sidebar .widget ol > li {
	border-bottom: 1px solid #ddd;
	margin-bottom: 12px;
	padding: 0 0 12px 20px;
}

.footer-widgets .widget li li,
.sidebar .widget li li {
	border: none;
	margin-bottom: 10px;
	padding-bottom: 0;
}

.footer-widgets .widget ul > li::before,
.sidebar .widget ul > li::before {
	background-color: #e2e8eb;
	border-radius: 50%;
	content: "\2023";
	float: left;
	font-size: 10px;
	left: 0;
	padding: 0 5px 0 6px;
	position: absolute;
	top: 2px;
	vertical-align: top;
}

It's a lot of CSS so you need to be specific.

---

Tutorials for StudioPress Themes.

[saralaughs]

Braddalton -- thank you so much for that quick response and the css.

It's just the front page. I used the term 'landing' because looking at the source and the css (what I could see of it) the term 'landing page' showed up in (I believe) the div class. But I'll have to go back to be sure of that.

Thanks again.

[Author]

Posts