Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

CSS Help for Matala

  1. travelbarefoot
    Member

    Hi there,

    I'm in the process of trying to make some adjustments to my blog (inkedincolour.wordpress.com) using the Matala theme - I have a few questions, I wonder if someone can help?

    1. I've tried to remove the title because my title is imbedded in my header image... but for the life of me it just wont go away... can someone help?

    2. I want to change the colour of the text (that is currently orange/red)

    3. I want to be able to change the colour of the beige "smudge" behind the titles...

    I think that's it (for now - there are others, I'm trying to figure out as much of it on my own as I can but I'm finding it difficult to find the right sections of code to edit.

    Thanks so much for your assistance.

    S

    The blog I need help with is barefootink.wordpress.com.

  2. travelbarefoot
    Member

    Any one? Please? :)

  3. designsimply
    Staff

    Hang tight! I'm trying to work through not only your request, but many others as well. Alos, you asked several questions in one post. If anyone else is willing to chip in, that'd be great, if not, I'll be back around soon.

  4. travelbarefoot
    Member

    Thanks designsimply - Don't worry about the first one - I have figured that out myself now - took me long enough! But I got there... it was the one I was most concerned about cos I have people visitin my site and it looked so weird - much better now... in a working state that can be viewed.

    Also, you know the paper background for the menu on the original Matala theme background... is that a separate image? It disappeared when I changed the backdrop - but I was wondering if I could still use it?

    In your own time

  5. timethief
    Member

    I tried searching. Does this help?
    http://en.forums.wordpress.com/topic/matala-specifications-for-custom-background-theme?replies=26#post-655521

  6. timethief
    Member

    What you are looking at with modifying this theme really amounts to a photoshop job because the various visual elements of the original design depend on each other as that last thread I linked makes clear. There's more here on changing the font color on post titles > http://en.forums.wordpress.com/topic/change-header-link-color?replies=6

  7. travelbarefoot
    Member

    thanks timetheif for your input! I see the challenge with the paper background element... so I'm thinking instead of this is it possible for me to even out the menu bar so it is in a straight line and put a coloured box (border would be fine) around each element?

  8. joshidaniel
    Member

    For your 3rd question try this:
    <br /> .entry-header {<br /> background: none;<br /> float: left;<br /> margin: 10px 0;<br /> padding: 15px 0 15px 20px;<br /> width: 460px;<br /> }<br /> .widget-title {<br /> background: none;<br /> color: #d8471d;<br /> font: 17px Georgia, "Times New Roman", Times, serif;<br /> font-weight: bold;<br /> margin: 10px 0;<br /> min-height: 35px;<br /> padding: 25px 0 0 15px;<br /> width: 222px;<br /> }

  9. designsimply
    Staff

    1. I've tried to remove the title because my title is imbedded in my header image... but for the life of me it just wont go away... can someone help?

    To hide the title and tagline completely, this should do the trick:

    #site-title,#site-description {
	text-indent: -9999px;
}

  10. designsimply
    Staff

    2. I want to change the colour of the text (that is currently orange/red)

    To figured this one out, I looked at the Matala CSS and found the color code for one of the orange/red things. It's #D8471D.
    https://s-ssl.wordpress.com/wp-content/themes/pub/matala/style.css?m=1323834012g&minify=false

    Then I searched the theme CSS and found all the places where #D8471D is used, copied them, and came up with this set:

    a,
#access li:hover > a,
#access ul ul li:hover > a,
#access .current_page_item a,
.post-date .entry-month,
.archive-title,
.page-title,
.widget-area ul li a:hover,
.widget-title,
#site-generator a:hover,
#random-gallery .random-gallery-title {
	color: #789C68;
}

.entry-info a:hover {
	border-bottom: 1px solid #789C68;
}

    Adjust the color to your liking.

    Note that there may also be other, similar red/orange colors set in the theme and I only checked for the #D8471D color in particular. If you find there are still other colors you want to change, try checking out the theme CSS to see if you can find it or post a link here and point out the text to see if someone can help you take a closer look.

  11. designsimply
    Staff

    3. I want to be able to change the colour of the beige "smudge" behind the titles...

    Here's the image that is used for the beige smudge behind titles in the Matala theme:
    http://s2.wp.com/wp-content/themes/pub/matala/images/bg-header-title.gif

    To change it out, upload a new image to your media library, copy the image URL, and use it in this CSS:

    .entry-header {
    background: url("YOUR_IMAGE_URL") no-repeat left top;
}

    Or you can remove it if you'd like:

    .entry-header {
    background: none;
}

  12. designsimply
    Staff

    Also, you know the paper background for the menu on the original Matala theme background... is that a separate image? It disappeared when I changed the backdrop - but I was wondering if I could still use it?

    Here's the Matala menu background image. The edges are made with the original Matala background in mind, so you may need to clean up the edges and upload a revised image in order for it to look good on a different background.
    http://s2.wp.com/wp-content/themes/pub/matala/images/bg-menu-2col.png

    Here's the CSS needed to add the menu background image back:

    #access {
    background: url("http://s2.wp.com/wp-content/themes/pub/matala/images/bg-menu-2col.png") no-repeat;
}

    Thanks for your CSS example @joshidaniel!! Since I modified a few things from it (like the color property) in some of my other examples, Id' update it to something like this perhaps:

  13. designsimply
    Staff

    Is it possible for me to even out the menu bar so it is in a straight line and put a coloured box (border would be fine) around each element?

    Do you mean even out the spacing between the top menu items?

    To give the top menu bar items a background color and a border, start with this and adjust the colors, margin, and padding to your liking:

    #access a {
	background: #789C68;
	border: 1px solid darkgreen;
	padding: 0 20px;
	margin-right: 6px;
}

#access a:hover {
	background: DarkSeaGreen !important;
}

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags