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

  • Unknown's avatar

    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: "(email visible only to moderators and staff)";
    	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: (visible only to logged in users)

  • Unknown's avatar

    That site is not on our WordPress.COM servers. You are posting to the wrong support forum and or relying on the wrong support documentation if you are looking for support for that site.

    WordPress.COM and WordPress.ORG are completely separate and have different username accounts, logins, features, run different versions of some themes with the same names, and have separate support documentation and separate support forums. Read the differences here http://en.support.wordpress.com/com-vs-org/

    This is wordpress.COM support. We provide support only for wordpress.COM hosted sites. Our support docs do not apply to
    (1) local installs of wordpress.ORG software on your own server or
    (2) wordpress.ORG software installs on paid hosting, and we do not provide support for them at wordpress.COM.
    (3) sites linked to wordpress.COM accounts with the Jetpack plugin so they display on the My Sites wordpress.com account page.

    The wordpress.ORG login link is here https://login.wordpress.org/ If you do not have an account yet then click Create an account https://login.wordpress.org/register/ and if you have lost an account password click Lost password? https://login.wordpress.org/lostpassword/

    Some Jetpack solutions are here http://jetpack.com/support/

    Others are in the Jetpack support forum at WordPress.org
    http://wordpress.org/support/plugin/jetpack

    However, if help cannot be found at either one then they can file a Jetpack support ticket here > http://en.support.wordpress.com/contact/?jetpack=needs-service

    WordPress.org support docs are at https://codex.wordpress.org/Main_Page
    See also https://apps.wordpress.org/support/ for app support.

  • Unknown's avatar

    Thanks @timethief, I’ll try those channels.

  • Unknown's avatar

    You are welcome and best wishes with your site.

  • The topic ‘Make WordPress.org site header look like WordPress.com site header’ is closed to new replies.