Re-arranging blog post

hello all,

Me and my friend are trying to re-arrange the layout of a blog post.

Please see the screenshot below,

The order of how we would like these be ordered in, is listed below,

  • Title
  • Header image
  • Author and time stamp | category tags

We would really apprieate the help and support for this, thank you.

Kind regards
Surge-_Hero

Hello there,

To do that, try doing these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    jQuery(function($) {

      var postFeaturedImg = $('.single-post .entry-thumb');

      if(postFeaturedImg.length) {
        postFeaturedImg.remove().clone().insertAfter('.entry-title');
      }

    });

4 . Update

Regards,
Kharis

Hello Kharis,

Thank you for your reply! and we have this plugin installed previously and tried your code.

We have provided a link to an album which contains screenshots of what the we did with your code before and after.

We have also provided the edited code below,

    jQuery(function($) {

    		var postFeaturedImg = $('.single-post .entry-thumb');
    		var cat = $('.meta-post .post-cat');

    		if(postFeaturedImg.length) {
    		     postFeaturedImg.remove().clone().insertAfter('.entry-title');
        
    		     cat.insertAfter('.single-meta');
                    }
    });

Regards
Surge-_Hero

Great!

Please let us know in a new topic if you have anything else to ask.

Regards,
Kharis

Hi Kharis

do you have any update on this?

Regards
Surge-_Hero

Sorry for the delay. I thought you sorted this out. :frowning:

I applied your code to my test site, and it’s resulting like this:

It works fine. Did you get it different? Please share a link to one of your posts, so I can check what’s going wrong.

Regards,
Kharis

Hello Kharis,

Thank you for testing the code, i tooks have worked gracefully on your end.

We will share once the website is live again via email :slight_smile:

Regards,
Thomas Gardner

Hello Kharris,

In regards to your screenshot, we are hoping for the “uncategorized” text to be on the right of the ‘Sydney’ text, so bascially all that text is on one line.

Could you possibly help with this?

Regards
Thomas Gardner

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

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

      .single-post .single-meta {
        float: left;
        margin-right: 15px;
        padding-top: 2px;
      }

    } 

Regards,
Kharis

Hi Kharris,

Thank you again that worked perfectly, however we have created a menu and are having an issue with this aswell, I have explained this below.

We are trying to change the background of highlighted ‘red’ text provided in the screenshot provided below so that it matches the same color as the “create-a-class Complexity” text.

Capture 9

If this helps, this is the code we have in our child theme that was provided by your colleague Roman

/*Show Current Page In Menu - Main Menu*/
:not(.float-header) #mainanv .current-menu-item > a, 
:not(.float-header) #mainnav .current-menu-ancestor > a,
.float-header #mainanv .current-menu-item > a,
.float-header #mainnav .current-menu-ancestor > a {
    border-bottom: 4px solid #e65209; /*(Orange)*/
}
/*Show Current Page In Menu - Sub Menu*/
:not(.float-header) #mainnav .sub-menu .current-menu-item > a, 
:not(.float-header) #mainnav .sub-menu .current-menu-ancestor > a,
.float-header #mainnav .sub-menu .current-menu-item > a, 
.float-header #mainnav .sub-menu .current-menu-ancestor > a {
    border-left: 4px solid #e65209; /*(Orange)*/
	border-right: 4px solid #e65209; /*(Orange)*/
}
:not(.float-header) #mainnav ul li a {
	color: #3b0077; /*(Purple)*/
	font-size: 18px;
	}
.float-header #mainnav ul li a {
	color: #ecba15; /*(Yellow)*/
	font-size: 16px;
}
/*Main Menu Hover*/
:not(.float-header) #mainnav ul li a:hover,
float-header #mainnav ul li a:hover {
	color: #e65209; /*(Orange)*/
	}

:not(.float-header) #mainnav ul li::before {
    color: #ecba15; /*(Yellow)*/
	}	
float-header #mainnav ul li::before {
    color: #3b0077; /*(Purple)*/
	}
/*Sub Menu's*/
:not(.float-header) #mainnav .sub-menu a {
	background-color: #ecba15; /*(Yellow)*/
	color: #3b0077; /*(Purple)*/
	}
.float-header #mainnav .sub-menu a {
	background-color: #3b0077; /*(Purple)*/
	color: #ecba15; /*(Yellow)*/
	}
.float-header #mainnav .sub-menu a,
:not(.float-header) #mainnav .sub-menu a {
	font-size: 14px;
	line-height: 1.2; 
	}
#mainnav ul li ul:after {
	background-color: transparent;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}
/*Sub Menu Border*/
#mainnav li:hover .sub-menu li a,
#mainnav .sub-menu li a,
#mainnav .sub-menu li a:hover {
	padding: 6px 3px 6px 3px;
}
#mainnav .sub-menu li {
	border: 0px solid;
	border-top: 3px solid #3b0077; /*(Purple)*/
}
.float-header #mainnav .sub-menu li {
	border: 0px solid;
	border-top: 3px solid #ecba15; /*(Yellow)*/
}
/*Sub Menu Hover*/
:not(.float-header) #mainnav .sub-menu a:hover {
	background-color: #f0c844 ; /*(Yellow)*/
	color: #e65209; /*(Orange)*/
	}
.float-header #mainnav .sub-menu a:hover {
	background-color: #4e009e; /*(Purple)*/
	color: #e65209; /*(Orange)*/
	}

Could you please advise any further assistance?

Regards
Tom

Hello Tom,

Try adding this CSS code:

    #mainnav .sub-menu li.menu-item-has-children:hover > a {
        background-color: #e65209 !important;
    } 

Regards,
Kharis

Hello Kharris,

We have managed to solve this issue by restarting the entire website again from fresh. This was done by backing up our website before hand.

Many thanks
Surge-_Hero