Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Blaskan theme help!

  1. lenaelmone
    Member

    Hi,

    I wanted to know if it's possible to center the custom menu on the top, and if it was possible to center the footer widget to cover the whole footer (if not center but maybe have it on the right side instead of the left.)?

    My site is http://www.jeuneetconne.com and I am using the Blaskan theme.

    Thanks so much!

    The blog I need help with is jeuneetconne.com.

  2. lenaelmone
    Member

    Oops didn't mean to post my site twice.

  3. thesacredpath
    Member

    Give this a try.

    .menu {
text-align: center;
}
.menu ul {
display: inline-block !important;
}

  4. lenaelmone
    Member

    Perfect! Thank you!

    Is there a way to spread the tabs out a bit? If not then no big deal.

    I want to get rid of the word "Category: Looks" on top of this pages and the other category pages I have at the menu. Is this possible?

    http://jeuneetconne.com/category/looks/

    Thanks again!

  5. lenaelmone
    Member

    * this page

  6. thesacredpath
    Member

    This will put some space between the nav tabs. You can adjust the 10px value as desired.

    #nav li {
margin-right: 10px;
}

    This will take the title off of tags, categories and archives pages.

    .archive h1.page-title {
display: none;
}

    If you want it only off of category pages, then use this instead.

    .category h1.page-title {
display: none;
}

  7. lenaelmone
    Member

    Thank you so much!!

    One last question I swear, whats the code for changing the color and size of the nav tabs on top?

    Thanks again.

  8. thesacredpath
    Member

    This is what controls the nav tabs (colors, fonts, background (gradient), borders, border radius'. text shadows, etc.

    #nav a {background:#000;
background:-moz-linear-gradient(top, #454545, #000);
background:-o-linear-gradient(top, #454545, #000);
background:-webkit-gradient(linear, left top, left bottom, from(#454545), to(#000));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545', endColorstr='#000000' );
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#454545, endColorstr=#000000)";
-webkit-background-clip:padding-box;
border:1px solid #000;
-moz-border-radius:3px;
-ms-border-radius:3px;
-o-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
color:#fff;
display:block;
font-size:11px;
font-weight:bold;
line-height:20px;
margin:0 1px 1px 0;
padding:4px 10px;
position:relative;
text-decoration:none;
text-shadow:0 1px 1px #000;
text-transform:uppercase;
}

    The problem is that in the past if you tried to edit and include all the background declarations with all the different browser-specific stuff, wordpress would strip it out because the CSS tidy CSS program they are using was not up to date. The "filter" and
    "-ms-filter" stuff is Internet Explorer specific stuff.

  9. thesacredpath
    Member

    Oh, and here would be the "hover" stuff for the nav in case you wanted to tweak the over colors and backgrounds as well.

    #nav a:focus, #nav a:hover {
background:#000;
background:-moz-linear-gradient(top, #666, #000);
background:-o-linear-gradient(top, #666, #000);
background:-webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000' );
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#666666, endColorstr=#000000)";
}

  10. lenaelmone
    Member

    Thanks again for the codes.

    I've been playing around with the different settings but it seems whenever I try to increase the px in font-size nothing is happening. Do you know why that is?

    If it's really unchangeable then I will do with what I have, you've helped so much so far anyways!!

    Thanks!

  11. lenaelmone
    Member

    I also tried the second code and it seems it is not doing anything to the hovering of the custom menu on top.

  12. designsimply
    Staff

    I've been playing around with the different settings but it seems whenever I try to increase the px in font-size nothing is happening. Do you know why that is?

    The most likely reason for this is that you changed the font size on the Appearance → Custom Design → Fonts page and that is overriding the other changes you're trying to make to the menu font size.

    You can get around this by making your rule more specific. One way would be to change "#nav a" to "#nav .menu-item a" and adjust the font size setting in that block.

  13. designsimply
    Staff

    I also tried the second code and it seems it is not doing anything to the hovering of the custom menu on top.

    It's the same specificity issue. Try this example:

    #nav .menu-item a:focus, #nav .menu-item a:hover {
	background: red;
	background: -moz-linear-gradient(top, yellow, red);
	background: -o-linear-gradient(top, yellow, red);
	background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(red));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='yellow', endColorstr='red' );
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=yellow, endColorstr=red)";
}

    Adjust the color code as necessary.

  14. lenaelmone
    Member

    Thank you thank you!!!!!!!

    It's perfect.

    Just one last question! How do I center my header?

    Thanks SO MUCH!!

  15. designsimply
    Staff

    Just one last question! How do I center my header?

    To center your header in the Blaskan theme, add this to your Appearance → Custom Design → CSS editor:

    #header figure {
	text-align: center;
}
figure img {
	float: none;
}

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags