Monday, March 6, 2017

Make WordPress.org site header look like WordPress.com site header

I have a WordPress.com site, located at http://hicksai.com, that I've added some custom CSS to to get the site header to look just like I want. Here is the custom CSS:

.site-title { margin-top: 27px; font-size: 50px; } .site-description::before { content: "Reysic"; display: block; float: right; margin-top: 70px; position: absolute; font-size: 19px; padding-left: 35px; background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/05/Skype_t.png'); background-size: contain; background-repeat: no-repeat; } .site-description { float: right; display: inline-block; margin: 0; font-size: 22px; font-size: 1.375rem; height: 111px; } .site-description::after { content: "reysic@me.com"; display: block; background-image: url('http://www.freeiconspng.com/uploads/email-server-png-3.png'); background-repeat: no-repeat; background-size: contain; font-size: 19px; padding-left: 35px; text-align: left; } .gist-data { height: 250px; } @media screen and (max-width: 60em) { .site-branding { text-align: left; } .site-branding .custom-logo { margin-left: 0; display: inline; margin-left: 1em; } } @media screen and (min-width: 667px) { .site-title:after { content: "Game AI Programmer"; display: block; font-size: 25px; } .site-title { margin-top: 0; } .site-description { visibility: hidden; } .site-description:before, .site-description:after { visibility: visible !important; } } .hentry img:hover { opacity: .6; filter: alpha(opacity=60); /* For IE8 and earlier */ } .no-sidebar .content-single { max-width: 100%; } .header-main { padding-bottom: 0; padding-top: 0; }

I'm now moving my site over to WordPress.org, located at reysic.com, and would like the site header to look exactly the same. I'm using the same theme, Tortuga, on both sites, though one is of course the WordPress.com version and one is WordPress.org version. When I try to use the custom CSS from the WordPress.com version on my new site the header looks messed up. I've already tried getting help from the theme author but they just suggested to start from scratch on the new site. However, my knowledge of CSS is very limited and I'm having a hard time making progress.

Could someone please help me get the header on my new site to look like the header on my old site? I realize this is probably a bit of a doozy, but I appreciate any help that can be provided.

The blog I need help with is reysic.com.


Source: Make WordPress.org site header look like WordPress.com site header

No comments:

Post a Comment