CSS Changes for Blog Posts

[RatatoskMalice]

Hi,

I would really like to make a couple edits to how the blog posts appear on my page. I am currently using the “mini-blog” style and would like to make two changes.

1.) I would like to change it so the blog preview/thumbnail (whatever you want to call it) uses the H6 tag to define the post title font style.

2.) I would like to switch out the “read-more-button” for the large with icon button (with the icon as fa-gears). (example image attached)

Can you please direct me on how to make these changes? I have some experience working with CSS.

other than that I just want to say how much I love swiftideas work. Huge fan of the new Joyn theme! Even more impressed then I was with Dante which has been one of my all time favorite themes.

Thanks!
Dru

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

Add the code below to your custom css option

.blog-items .standard-post-content h1{
font-size: 30px!important;
font-weight: bold!important;
color: #28AFED!important;
}

-Rui

[RatatoskMalice]

Thank you for the fast response. I added the code you provided to the CSS section (Theme Options -> Custom CSS) but there has been no change. Am I missing something? Also, any ideas on how to make those changes to the read-more-button?

Thank you!
Dru

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

I Forgot about the button. Here it goes.

Inside the file sf-post-formats.php find the line 549 similar to the one below.

$post_item .= '<a class="read-more-button" href="' . $post_permalink . '">' . __( "Read more", "swiftframework" ) . '</a>';

and replace by this one:

$post_item .= do_shortcode('[spb_button button_size="standard" button_colour="accent" button_type="sf-icon-stroke" button_text="Button Text" button_icon="fa-gears" button_link=". $post_permalink ." button_target="_self" button_dropshadow="no" animation="none" animation_delay="0" width="1/1" el_position="first last"]');

Let us know if it worked.

-Rui

[RatatoskMalice]

Rui,

Thank you! The button text worked near flawlessly! Only 2 issues. Instead of linking to the post, the button now directs to http://www.druseefried.com/.%20$post_permalink%20.

The other issue I have is the placement or alignment. Is there anyways to move the button up a tad to make it look a bit cleaner? Image example attached, if you let me know what line to look at for that alignment I can play around with it until it fits 🙂

Thank you so much!
Dru

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

It mas missing some quotes, replace by this one

$post_item .= do_shortcode('[spb_button button_size="standard" button_colour="accent" button_type="sf-icon-stroke" button_text="Button Text" button_icon="fa-gears" button_link="'. $post_permalink .'" button_target="_self" button_dropshadow="no" animation="none" animation_delay="0" width="1/4" el_position="first last"]');

Also changed the width so the button can stay in a different position.

-Rui

[RatatoskMalice]

Hey Rui,

That code for the post button worked beautifully! Thank you so much for your help. Can you give me any insight on the title font change? I added the CSS as directed but it did not change anything. I attached a screen shot a couple posts up.

Thank you again!
Dru

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.mini-items .blog-item h3 {
    font-size: 14px;
}

Thanks
Mohammad

[RatatoskMalice]

Mohammad and Rui,

Thank you so much guys! That solves all of my issues, for now at least.

Thank you!!!!
Dru

[Kyle – SUPPORT]

Thanks guys!