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

Hi progenki,

First, please don’t self bump or just respond with question marks like the above. Our queue system works by the oldest posted response within a topic so each time you do that it just puts your post to the end of our queue.

For your issue, it sounds like its either a caching issue or a permissions issue on the file the theme creates to store all the css from the styling tab. Make sure the avia folder in your uploads folder has at least 755 chmod permissions as well as the file inside it.

Regards,

Devin

Hi,

Please add this css to you /css/custom.css file OR to Quick CSS located in enfold > (theme options) > layout styling at the bottom of the page: (change 50px

.av-special-heading {

margin-top: 0px !important;

}

Thanks,

Nick

Hi,

The best way to go about it, is to first install the Simple Image Sizes plugin ( http://wordpress.org/extend/plugins/simple-image-sizes/ ). The plugin will give you complete control over images: setting constraints for specific locations like blog, thumbnails, portfolio, gallery, shop, etc. along with the ability to set whether to crop an image or not in Settings > Media.

Changing the dimensions of images does NOT automatically change all the images already uploaded but only affects new uploads. To change the sizes of images already uploaded, you will need to use the Regenerator – also a part of the Simple Image Sizes and found on the bottom of Settings Media. Don’t forget that images scale down, so always upload images bigger (or the same) as the constraints you set in Settings > Media (with the plugin) or you will get blurry (stretched) or incomplete images.

You can add your custom image size to use by following this tutorial but fpr the last part where instead of gallery you would add blog image. https://kriesi.at/support/topic/how-to-change-size-of-featured-image-in-portfolio-item-page-and-disable-lightbox#post-123789

Thanks,

Nick

Hi,

you have a javascript error coming out of the piece of inline code you added for people with old browsers above the </header

You need to change your line

var $buoop = {vs:{i:8,f:15,o:,s:5,n:9}}

to

var $buoop = {vs:{i:8,f:15,o:10.6,s:5,n:9}

---

To change the height , here is css

#footer {

padding: 0px 0 0px 0 !important;

}

@media only screen and (min-width: 768px){

div .av_one_third {

height: 180px;

}}

#socket .container {

padding: 5px 0;

margin-top: 15px;

}

Please add it to your /css/custom.css file

Thanks,

Nick

Hi,

Have you added this? Try to remove it and see if anything changes.

.main_color {

background: #FFF url(https://www.naturaloutlook.com/wp-content/uploads/White_Pixel.gif) top left repeat fixed;

}

Thanks,

Nick

It should be:

#top .social_bookmarks_tumblr a {

background: url(https://yoursite.com/wp-content/uploads/custom/apple.png) no-repeat center;

}



#top .social_bookmarks_tumblr a:hover {

color:#fff;

background: url(https://yoursite.com/wp-content/uploads/custom/apple-hover.png) no-repeat center;

}

So that the background is on the link and the hover as well.

Hi warrentkachuk,

Can we see the pages live? Inspecting the code will give us the most information to try and figure out what the issue is.

As an aside, our Queue system works by oldest post within a topic so self-bumping or self-responding pushes the topic to the end of our queue instead of bringing it forward.

Regards,

Devin