WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
Hello,
Thanks everyone for their help so far. Gratitude.
I have a number of questions for http://www.jeremyshub.com.au - using CSS.
1) How do I centre the slide show on the home page?
2) How do I get the header to go down 1cm from the top?
3) I want my navbar titles to look sexy like the theme iTheme2 or similar?
4) How do I remove the "be the first to like this page" on my About page?
Thank you so much.
Jeremy
The blog I need help with is jeremyshub.com.au.
1) How do I centre the slide show on the home page?
The slideshow itself is already centered within the content area. It just looks off-center in your case because your widget area is empty. You can visualize the page structure a little bit by temporarily adding a red border around the content area if you'd like to learn more about how to see layout structure:
jeremyshub693
.page #entry-content {
border: 2px dotted red;
}The slideshow will center automatically. If you want to make it look more centered in your setup, then you can make the content area wider like this:
.page #content,
.page #entry-content {
width:800px;
}Note that this will push widgets down. So if you were to add widgets later, you would need to style them to your liking at that point.
2) How do I get the header to go down 1cm from the top?
You currently have the following custom CSS saved on your Appearance → Custom Design → CSS page:
#header {
padding-top:48px;
padding-bottom:24px;
}That "padding-top" value will adjust the distance of the header area from the top of the page.
I see that you've also used absolute positioning to move the top navigation outside the normal flow of the document, and that means it won't be affected by changing the #header padding. You can adjust the top navigation menu spacing by adjusting the "top" value in the following block on your Appearance → Custom Design → CSS page:
#access,div.menu {
width:100%;
position:absolute;
top:0;
left:0;
}Regarding units of measurement, the most commonly used units are px and em—and it's best practice to try to stick to the predominant measurement unit used in the original stylesheet. I checked out the AutoFocus stylesheet and it uses px, so I would recommend sticking with that. Just adjust the numbers until the spacing looks good to you. Note that physical measurements like cm won't always match up exactly with rendering by browsers on the web. If you stick with a consistent unit of measure though, you should be good.
https://s1.wp.com/wp-content/themes/pub/autofocus/style.css?m=1335393443g&minify=false
3) I want my navbar titles to look sexy like the theme iTheme2 or similar?
This one takes a bit of work depending on the themes you're working with and how similar the HTML structure is between the two of them. You're in luck because the HTML structure is pretty similar between most WordPress.com themes.
I translated the menu styling from iTheme2 to AutoFocus for you. Here are the steps I took to do it:
1. Copy all of the CSS from the "=Menu" section in the iTheme2 stylesheet: https://s1.wp.com/wp-content/themes/pub/itheme2/style.css?m=1337845271g&minify=false
2. Replace all url() values with full URLs. Replace "url(images/nav-bar-bg.png)" with "url(http://s1.wp.com/wp-content/themes/pub/itheme2/images/nav-bar-bg.png)" and replace "url(images/home-icon.png)" with "url(http://s1.wp.com/wp-content/themes/pub/itheme2/images/home-icon.png)".
3. The HTML structure in AutoFocus is just a little different than iTheme2, so replace "#access > div > ul" witih "#access > ul".
4. Keep all of the current menu modifications you have except remove "padding-right:20px;" from the "#access li,div.menu li" block (unless you want to keep all that extra spacing). So your previous menu-related custom CSS ends up as this:
#access,div.menu {
width:100%;
position:absolute;
top:0;
left:0;
}
#access li,div.menu li {
display:inline-block;
}
#access li,div.menu li {
width:auto;
}5. Add the modified iTheme2 menu CSS to the bottom of your Appearance → Custom Design → CSS:
#access {
background: #6a6a6a url(http://s1.wp.com/wp-content/themes/pub/itheme2/images/nav-bar-bg.png) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#6a6a6a));
background: -moz-linear-gradient(top, #b9b9b9, #6a6a6a);
background: linear-gradient(-90deg, #b9b9b9, #6a6a6a);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.3);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.3);
box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.3);
display: block;
float: left;
margin: 0 0 20px -2px;
width: 100.2%;
}
#access ul {
list-style: none;
margin: 0;
padding-left: 0;
}
#access > ul > li {
border-right: solid 1px #575757;
-webkit-box-shadow: 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1);
-moz-box-shadow: 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1);
box-shadow: 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1);
float: left;
position: relative;
}
#access > ul > li:hover {
background: #474747;
background: -webkit-gradient(linear, left top, left bottom, from(#282828), to(#4f4f4f));
background: -moz-linear-gradient(top, #282828, #4f4f4f);
background: linear-gradient(-90deg, #282828, #4f4f4f);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#access > ul > li:first-child {
-webkit-border-radius: 8px 0 0 8px;
-moz-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
}
#access a {
color: #fff;
display: block;
font-size: 13px;
line-height: 2;
padding: 10px 15px;
text-decoration: none !important;
text-shadow: 0 -1px 0 rgba(0,0,0,.7);
}
#access ul ul {
background: #fff;
border: solid 1px #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.3);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.3);
box-shadow: 0 1px 2px rgba(0,0,0,.3);
display: none;
float: left;
margin: 0;
padding: 5px 0;
position: absolute;
top: 45px;
left: 0;
z-index: 99999;
}
#access ul ul ul {
left: 205px;
top: 0;
}
#access ul ul li {
position: relative;
}
#access ul ul a {
color: #666;
font-size: 12px;
font-size: 1.2rem;
line-height: 1.5em;
padding: 5px 15px;
text-shadow: none;
width: 180px;
}
#access li:hover > a,
#access ul ul :hover > a {
}
#access ul ul a:hover {
background: #f3f3f3;
color: #000;
}
#access ul li:hover > ul {
display: block;
}
#access .current_page_item,
#access .current-menu-item {
border-left: solid 1px #000;
border-right: solid 1px #000;
background: #474747;
background: -webkit-gradient(linear, left top, left bottom, from(#282828), to(#4f4f4f));
background: -moz-linear-gradient(top, #282828, #4f4f4f);
background: linear-gradient(-90deg, #282828, #4f4f4f);
-webkit-box-shadow: inset 0 2px 8px rgba(0,0,0,.8);
-moz-box-shadow: inset 0 2px 8px rgba(0,0,0,.8);
box-shadow: inset 0 2px 8px rgba(0,0,0,.8);
}
/* Home tab */
#access div.menu > ul > li:first-child,
#access li.menu-item-home {
width: 42px;
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
#access div.menu > ul > li:first-child > a,
#access li.menu-item-home a {
background: url(http://s1.wp.com/wp-content/themes/pub/itheme2/images/home-icon.png) no-repeat 14px center;
width: 16px;
text-indent: -9000em;
}
#access div.menu > ul > li:first-child > a:hover,
#access li.menu-item-home a:hover {
background-position: -41px center;
}
#access div.menu > ul > li:first-child.current_page_item,
#access div.menu > ul > li:first-child.current-menu-item,
#access li.menu-item-home.current_page_item,
#access li.menu-item-home.current-menu-item { /* reset the default current menu item styles */
background: none;
border-right: solid 1px #575757;
-webkit-box-shadow: 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1);
-moz-box-shadow: 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1);
box-shadow: 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1);
}
#access div.menu > ul > li:first-child.current_page_item:hover,
#access div.menu > ul > li:first-child.current-menu-item:hover,
#access li.menu-item-home.current_page_item:hover,
#access li.menu-item-home.current-menu-item:hover {
background: #474747;
background: -webkit-gradient(linear, left top, left bottom, from(#282828), to(#4f4f4f));
background: -moz-linear-gradient(top, #282828, #4f4f4f);
background: linear-gradient(-90deg, #282828, #4f4f4f);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}4) How do I remove the "be the first to like this page" on my About page?
See http://en.support.wordpress.com/likes/#turn-likes-onoff-on-specific-posts
Whew :)
Thanks heaps and heaps.
I'm not sure what 'staff' is but thank you for answering my questions. I really appreciate it.
I have more question - I'm not sure if its OK to keep asking.
Gratitude
"Staff" means I work for WordPress.com. :)
Keep the questions coming. I'm happy to help.
Thanks Happiness Engineer,
I will.
This topic has been closed to new replies.
