Hi Crippy,

I answered your question in the other topic you asked it on here: https://kriesi.at/support/topic/change-background-color-for-top-heading-section#post-125066

Regards,

Devin

You can send the information to my email at DevinVinson (at) gmail.com. Make sure to include a link to this topic so that my spam filter doesn’t grab it :)

Hi andi,

Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

#top .logo.bg-logo {

float: right;

right: 0;

left: auto;

}

#top .main_menu {

left: 0;

}

#advanced_menu_toggle {

left: 0;

}

Just as an aside our queue system goes by oldest posted topic to newest so self bumps or self replies just put the topic to the end of our queue which just about never goes beyond 24 hours response.

Regards,

Devin

You can include a secondary option for retina with something from: http://css-tricks.com/snippets/css/retina-display-media-query/

I’ve edited your previous posts and will mark this resolved for now. The css tricks retina trick is basically just duplicating what you have now for the background image except you will use a higher res image and it will only take effect on retina.

eg:

@media

(-webkit-min-device-pixel-ratio: 2),

(min-resolution: 192dpi) {

/* Retina-specific stuff here */

#top .social_bookmarks_tumblr a {

background: url(.......uploads/custom/apple-retina.png) no-repeat center;

}



#top .social_bookmarks_tumblr a:hover {

color:#fff;

background: url(........uploads/custom/apple-hover-retina.png) no-repeat center;

}

}

Hi stingray2009,

If you’ll be modifying the framework files its best to do it on the parent theme. Otherwise you need to duplicate the function that includes the file so that it replaces the one in the parent and then include it in the child. Either way you’ll always have to update that file manually whenever there is a theme update since it doesn’t build on top of the parent.

Regards,

Devin

Hi Dayna,,

Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

#header_meta {

background: #333;

}

Change the color code to whatever color you want it to be.

@ Crippy – To change its opacity, you would just use a RGBA color instead and have the transparency to whatever you wanted. See: http://www.css3.info/preview/rgba/

Regards,

Devin

Hi,

I am gonna assume the size of your image that you want is 950width and 150 height. So change as appropriate

---

Image Size on Main Blog Page.

Ok . The instructions above that you followed would create the image size you want, but on the main blog page ,

just need to follow one more step http://i.imgur.com/JvxGDYc.png

Here you can see dimensions on the main blog page http://www.clipular.com/c?10253053=zR5ebPSB_qN2exkurXg8R_3Noxw&f=.png

---

Instructions for Individual Blog Posts (image size)

On the individual blog pages, i think the image size is set 180×180, correct? So you would need to go to Media > Settings and find where it says 180×180 and change it to 950×150. And looking on that page I see there is Square Size which is 180×180.

1. Now change it to look like this http://www.clipular.com/c?10254053=SGwlS2E0lQX-vEP-h2NvIAcZ2xE&f=.png

2. Then you need to regenerate like this: http://www.clipular.com/c?10182062=f2f4ilB119SKyxouKSLoeM_OaNw&f=.png

3. Save (below regenerate button)

4.You must add this css to /css/customl.css or it wont work.

#top.single-post .small-preview {

width:950px;

height:150px;

}

#top .fullsize .template-blog .blog-meta {

width:950px;

}

#top .fullsize .template-blog .post .entry-content,#top .fullsize .template-blog .post-title,#top .fullsize .template-blog .post .entry-content>* {

max-width: 900px;

}

(if regenerate doesn’t work, then just delete the blog post image, and upload it again and it will be of the correct size. it means you don’t have enough memory and will have to re-upload the blog post images one by one. However it works almost always).

Here is how it looks for me now resized: http://www.clipular.com/c?10247086=2szwOylwNrX5oZgEMqHfLbowhtQ&f=.png

Thanks,

Nick

Hi soulfabrics,

That is actually a pretty tall order. The theme uses media queries at a few different pixel widths to change the css for certain elements. What you would need to do is add the margin: 0, padding: 0 declarations to the needed selectors for each responsive adjustment with new media queries.

You can see an example in the custom.css file where we’ve added the basics for tablets, desktop and mobile.

So for each case where you don’t like the margin, you would adjust the margin or padding or container for large desktop size, regular view, tablets, mobile and possible small mobile (under 350 or so pixel width) depending on how the margins are inherited.

If you aren’t comfortable with that level of css customization I would recommend looking into a freelance developer and having all the changes added to a child theme style or at the very least the custom.css file.

Regards,

Devin