Help with CSS, template and plugin

Support
#1

Hi,

Really happy with x-theme and feel like I’m starting to understand it a bit better but there’s still a few things I’d like to change but I can’t work out how to. Would be grateful for any help:

CSS

Header social media icons: would like the rollover colour to be rgb(225, 122, 122)
Header bottom border: would like to remove

Post images and videos: would like there to be no grey border
Post images: (this is me being very picky so feel free to ignore :slight_smile: ) there’s a slight wobble when you hover over the image, how do I stop this

Footer social media icons: would like the rollover colour to be rgb(225, 122, 122)

Template

Would like the Post title, category etc. to appear below the image

Plugins

I’ve installed Instagram Feed and would like it to appear in my sidebar under my newsletter subscribe form but I have no clue how to do it.

Thanks,

Becky

#2

Hello @becfret,

Thanks for asking. :slight_smile:

CSS: Please add following CSS under X > Theme Options > CSS to make necessary CSS changes:

.x-topbar .x-social-global a:hover {
    color: rgb(225, 122, 122);
}

header.x-header-landmark {
    border: 0;
}

.entry-featured {
    border: 0;
}

footer.x-colophon.bottom .x-social-global a:hover {
    color: rgb(225, 122, 122) !important;
}

Template: I am assuming that you are looking to make the change in post page. Please add following JS code under X > Theme Options > JS:

jQuery( '.single-post .entry-featured' ).insertBefore('.entry-header');

Also add following CSS under X > Theme Options > CSS to adjust the spacing between image and title:

header.entry-header {
    margin-top: 10px;
}

Plugin: Looking at the source code I think you are using Instagram Feed plugin. I am sharing the plugin installation link that you can take a look. In that developer has shared bunch of shortcodes that you can use to display feed in sidebar. I haven’t used this plugin so can’t comment much on the functionality, but under Appearance > Widget see if the plugin provides Widgets. If it comes with Widgets that the same can be added into the sidebar. If not, you need to use shortcodes.

Let us know how it goes.

Thanks.

#3

Hi @Prasant,

Thank you so much, I’m nearly there :slight_smile: Just two more things…

CSS: social media icons - I wanted to change the circle of colour on hover rather than the icons
Template: I also wanted to change the title to be below the image on the home page.

Thanks again for all your help,

Becky

#4

Hello Becky,

Thanks for updating thread. :slight_smile:

CSS: Please replace the CSS I have you for social icons with following:

.x-social-global a:hover {
    background-color: rgb(225, 122, 122) !important;
}

Template: Please add following JS under X > Theme Options > JS:

jQuery( '.blog .entry-featured' ).insertBefore('.entry-header');

Thanks.

#5

Hi @Prasant,

Thanks, the links are working perfectly but the jQuery change isn’t working, all the images and videos are bunched together above the title.

Thanks again for all your help,

Becky

#6

Hi Becky,

Please update the given JS code to this:

(function($) {
  $(".blog .post").each(function(){
    $(this).find("header.entry-header").insertAfter( $(this).find(".entry-featured") );
    $( "header.entry-header, article.post" ).addClass( "mtl" );
  });
})(jQuery);

Keep in mind that this kind of layout does not look good when your post has no featured image.

Hope it helps,
Cheers!

#7

Hi @friech,

Thank you, this works perfectly. I’ll be having an image on every post anyway so the layout shouldn’t be affected.

I swear this is the last bit of help I need but I can not get the image to align on the main page. I got it to work on the actual post pages e.g. http://crispsforbreakfast.com/demo-5-reasons-you-need-the-x-theme/ you can see the post image lines up with the top of the gravatar but I can not work out which bit of css I need to change to get the image to line up with the top of the gravatar on the main page http://crispsforbreakfast.com/

Thanks again for all your help,

Becky

#8

Hello @becfret,

Thanks for updating the thread. :slight_smile:

That’s not an issue, ma’am. We are here to help you out, so you can have a better online presence. To make necessary changes, please add following CSS under X > Theme Options > CSS:

.x-main.left .hentry:first-child {
    margin-top: 0 !important;
}

Let us know how it goes.

Thanks.

#9

Hi @Prasant,

Thank you so much for all your help these past few days. That’s everything exactly as I want it. Really happy with your theme.

Thanks again,

Becky

#10

You are most welcome, Becky.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.