WordPress.org

Ready to get started?Download WordPress

Forums

Oxygen
[resolved] Customizing a header in Oxygen (5 posts)

  1. Chelsey
    Member
    Posted 9 months ago #

    I realize this question has been asked before, but the solutions they suggested didn't help me.

    The header on my website (diybudgetgirl.com) is supposed to be 800 x 125 px. Instead, WordPress automatically reduces it to the suggested size (which I think is 400 x 100). I've been trying to fix this in the Style.css file, but nothing changes.

    I also cleared my browser cache, but it didn't do anything.

    This is what the code under "header" currently looks like:

    #header {
    	clear: both;
    	width: 100%;
    	float: left;
    	padding: 40px 0 0 0;
    }
    #branding {
    	float: left;
    	width: 100%;
    	overflow: hidden;
    }
    #site-title {
    	font-family: 'Abel', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    	font-size: 3em;	/* 36 / 12 = 3 */
    	line-height: 1em;
    	margin: 0 0 3px 0;
    	text-transform: uppercase;
    	word-wrap: break-word;
    }
    #site-title a {
    	color: #222;
    	border-bottom: none;
    }
    #header img { max-width: 100%; }
    #site-description {
    	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    	font-size: 0.9166666666666667em;	/* 11 / 12 = 0.9166666666666667 */
    	font-weight: normal;
    	line-height: 1.5em;
    	margin-bottom: 20px;
    	color: #bbb;
    	float: left;
    	width: 100%;
    	clear: both;
    }
    .breadcrumbs {
    	font-size: 0.9166666666666667em;
    	color: #aaa;
    	float: left;
    	width: 100%;
    	background: #f3f3f3;
    	padding: .25em .6em .35em .9em;
    	margin-bottom: 20px;
    	border-left: 10px solid #e9e9e9;
    }
    .breadcrumbs a, .breadcrumbs a:visited { color: #777; }
    .breadcrumbs a:hover { color: #000; }
    #sidebar-header {
    	overflow: hidden;
    	float: right;
    	width: 100%;	/* 468 / 940 = 0.4978723404255319 */
    	height: 120px;
    	margin-bottom: 20px;
    }

    I'm not very good with CSS, so I've done everything I can think of. There are so many files, I'm not even sure if I'm messing with the correct one. If someone can figure out what's wrong, that would be appreciated.

    Thanks!

  2. Rajesh Soni
    Member
    Posted 9 months ago #

    The below code is forcing the width:

    #branding: width 45%

    ... in this file: http://www.diybudgetgirl.com/wp-content/themes/oxygen/style.min.css?ver=0.5

  3. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    Make sure that you are not changing any theme files - as those changes will be lost when the theme is updated. You can make CSS changing using custom CSS, or if you need to make file level changes, use a Child Theme.

    http://codex.wordpress.org/Child_Themes

    To modify the above, try ADDING this to your Custom CSS or child theme:

    #branding {
        width: 100%;
    }
  4. Chelsey
    Member
    Posted 9 months ago #

    @Rajesh Soni: That worked! I was editing the wrong file.

    Thank you both for your help! :D

  5. Rajesh Soni
    Member
    Posted 9 months ago #

    You're welcome, Chelsey. Glad I could be of help.

    Cheers!

Reply

You must log in to post.

About this Theme

About this Topic