Need help? Check out our Support site, then


Oxygen Customization Help

  1. Hi, I'm using the Oxygen theme and i have a few customization problems.

    I formatted the theme content/side bars to be larger with this

    @media screen and (min-width: 1050px) {
    	#page {
    		max-width: 1200px;
    		width: 100%;
    	}
    
    	.content-area {
    		width: 70%;
    	}
    
    	.sidebar-widget-area {
    		width: 10%;
    	}
    
    	.entry-thumbnail img {
    		width: 100%;
    	}
    }

    Everything seems to be fine but as you can see on the blog in the listed threads only some of the treads images a showing up not all of them.
    I would like to them all to show.

    Another thing i would like to give individually the theme blocks (content/sides bars) a color or to be transparent, could anyone give me a code that i can add to make that happen.

    I would like to give slogan underneath the site title another color and another font.

    Anybody can help me?
    Thanks in advance..

    http://beyoundreality.wordpress.com

    The blog I need help with is beyoundreality.wordpress.com.

  2. Hi there, the site you reference, http://beyoundreality.wordpress.com/, has been deleted. I see you have another site at http://beyondmatrix.wordpress.com though. I see two missing images, and the URLs for both of those go to your deleted site.

    Open those two posts in the editor (and any others with missing images I did not see) and delete the image and delete the featured image and set it again from your current site media library.If they are not in the media library on your current site, upload them as featured images.

    The site description color can be changed with the following CSS. Edit the red color code I used for demo as desired.

    .site-description {
        color: #cc0000;
    }

    For the sidebar color, use the following CSS. The first three numbers in the rgba color (0, 0, 0) are the red, green and blue color values, which you can edit as desired. The fourth value, 0.3, is the opacity. The closer to 1, the more opaque, the closer to 0, the more transparent.

    .hentry .mejs-mediaelement, .hentry .mejs-container .mejs-controls, .page-links a, #secondary, .content-sidebar .widget_twentyfourteen_ephemera .widget-title:before, .site-footer, .site:before, .primary-sidebar.widget-area .milestone-countdown, .footer-sidebar.widget-area .milestone-countdown {
        background-color: rgba(0, 0, 0, 0.3);
    }

    The following CSS sets the overall color for the content area, which extends behind the left sidebar, so the left sidebar color you set above will overlay that color. You will see what I mean when you apply this CSS.

    .content-area, .content-sidebar {
        background-color: rgba(171, 210, 116, 0.8);
    }

    The white up to the right of the header area is the base color in .site. I would suggest setting this first and then working with the other colors to get the effect you want.

    .site {
        background-color: #e3d797;
    }
  3. Thanks, Yeah i was getting frustrated with that theme so i changed everything and chosen another theme.

    Then i had another problem with the banner and page width but i solved it with a few tweaks...

    For the Banner i used :

    h1 {
        background-size: contain;
    }
    
    #masthead {
    position: relative;
    top: 0px;
    background: url('http://i.imgur.com/nam3r2a.gif') no-repeat;
    background-repeat-x: no-repeat;
    width: 1200px;
    height: 325px;
    margin: 10px;
    margin-top: 0px;
    }

    Re-formated the page with :

    @media screen and (min-width: 1100px) {
    	#page {
    		max-width: 1920px;
    		width: 100%;
    	}
    
    	.content-area {
    		width: 100%;
    	}
    
    	.sidebar-widget-area {
    		width: 100%;
    	}
    
    	.entry-thumbnail img {
    		width: 100%;
    	}
    }

    Thanks for the codes i will try them ^_^';
    Any way to make the .content-area, .content-sidebar background transparent ?

  4. And what the codes text colors, Fonts Sizes for .content-area, .content-sidebar ?

  5. Okay i found a part just by trying a few thing's with...

    .content-sidebar {
        color: #cc0000;
        font-size:150%;
    }
    .content-area {
        color: #cc0000;
        font-size:150%;
    }

    But still have a a problem this only work with right side bar

    .content-sidebar {
        color: #cc0000;
        font-size:150%;
    }

    What about the left one ?

    And i would need the blocks titles too on both side bars and content!?

    .?????????????? {
        color: #cc0000;
        font-size:150%;
    }
  6. And what do i add to change the fonts

    .content-sidebar {
        color: #cc0000;
        font-size:150%;
        font???????:???;
    }
  7. "bump"

  8. Any way to make the .content-area, .content-sidebar background transparent ?

    I just checked http://beyondmatrix.wordpress.com/ and I see that you're using Twenty Fourteen now. It helps to note that because CSS is theme-specific and the help request title mentions the Oxygen theme.

    In the future, it'd be a good idea to create a new help request at http://en.forums.wordpress.com/forum/css-customization/#postform just because of the theme switch/theme name thing. :) Also, it's a good idea to post each major question in a new thread and always mention the theme and give a link to the page you're working on if you can.

    For making the .content-area and .content-sidebar background areas transparent, I think they already are. Here's one trick I use sometimes to visualize what elements I'm working on in CSS: I either add a red border or a yellow background just while I'm working in the preview area so I can see the elements more clearly. Here is an example:

    .content-area,
    .content-sidebar {
    	background: yellow;
    }

    If you add that to the bottom of your Appearance > Customize > CSS editor, you should see those areas light up.

    I think instead of turning those areas transparent, maybe you really want to reverse the colors of everything inside the post content area. Does that sound more accurate?

    If it is, here's a very basic start that is a start about the transparent background bit but also gives you an idea on the complexity of that type of change:

    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .page-content {
    	background-color: inherit;
    }

    It turns lots of the background of the elements inside the post area transparent (but not all of them yet), and you should be able to see that some things still need work and also that the colors for all the text (and maybe some other things) would also need to be reversed.

    Before continuing, let me know if that's the right idea. Then I can help you work through your CSS a bit more from there.

  9. The left sidebar is under #primary-sidebar or .primary-sidebar. Here are some rules for changing color and size in the widgets in the left sidebar.

    #primary-sidebar a {
        color: blue;
    }
    #primary-sidebar .widget-title {
        color: yellow;
        font-size: 100%;
    }
    .primary-sidebar .widget {
        font-size: 100%;
    }

    font family would be set with the following declaration added to the appropriate rule:

    font-family: Arial, Helvetica, Verdana, sans-serif;

    Let's start with the above and go from there.

  10. Thank you.. ^_^" That's exactly what i wanted to know..

    This is what my code look like right now.

    /*Heade-start*/
    h1 {
        background-size: contain;
    }
    
    #masthead {
    position: relative;
    top: 0px;
    background: url('http://i.imgur.com/nam3r2a.gif') no-repeat;
    background-repeat-x: no-repeat;
    width: 1200px;
    height: 325px;
    margin: 10px;
    margin-top: 0px;
    }
    /*Heade-End*/
    
    /*Page-Lenght-Start*/
    @media screen and (min-width: 1100px) {
    	#page {
    		max-width: 1920px;
    		width: 100%;
    	}
    /*Page-Lenght-End*/
    
    /*Page-Backgroud-Color-Start*/
    .site {
        background-color: #000000;
    }
    /*Page-Backgroud-Color-End*/
    
    /*Page-Description-Start*/
    .site-description {
        color: #cc0000;
    	  font-size:140%;
    }
    /*Page-Description-End*/
    
    /*Page-Content-Start*/
    #content-area a {
        color: #fffff;
    	  font-size: 80%;
    }
    #content-area .entry-title {
        color: #cc0000;
        font-size: 100%;
    }
    .content-area {
        color: #fffff;
    	  font-size:120%;
    	  width: 100%;
    }
    	.entry-thumbnail img {
    		width: 120%;
    	}
    }
    /*Page-Content-End*/
    
    /*Page-Primary-Sidebar-Start*/
    #primary-sidebar a {
        color: #fffff;
    	  font-size: 80%;
    }
    #primary-sidebar .widget-title {
        color: #cc0000;
        font-size: 100%;
    }
    .primary-sidebar .widget {
    	   color: #fffff;
        font-size: 80%;
    	width: 100%;
    }
    /*Page-Primary-Sidebar-End*/
    
    /*Page-Second-Sidebar-Start*/
    #content-sidebar a {
        color: #fffff;
    	  font-size: 80%;
    }
    #content-sidebar .widget-title {
        color: #cc0000;
        font-size: 100%;
    }
    .content-sidebar .widget {
    	   color: #fffff;
        font-size: 80%;
    	width: 100%;
    }
    /*Page-Second-Sidebar-Start*/

    But i still have 2 last issues..
    in the /*Page-Content-*/ the content-area .entry-title doesn't seem to be the right formulation to change the "Title" of the entries and the other thing is once i choose a category in the menu there's another type of "Title" that appears on top Exp : I choose Blog category

    Category Archives: Blog
    
    All my blog post

    Thanks..

  11. Since you are using custom fonts, the selectors get changed a bit. You can add the following to change the post/page titles and then edit the font family as desired.

    .wf-active .entry-title {
        font-family: "Times New Roman";
    }

    On the category pages, there are two lines of text above the top: The one in dark grey which would be here:

    .archive-title, .page-title {
        color: #FFFFFF;
        font-family: "Times New Roman" !important;
        font-size: 16px;
    }

    The second is the category description in the lighter grey which would be here:

    .taxonomy-description p {
        font-family: Arial;
        color: #FFFFFF;
        font-size: 14px;
    }
  12. Thanks again ^_^'

    Now it's perfect..
    If that can help someone else here's my whole code :

    /*Header-start*/
    @media screen and (min-width: 1100px) {
    #masthead {
    position: relative;
    top: 0px;
    background: url('http://i.imgur.com/nam3r2a.gif') no-repeat;
    background-repeat-x: no-repeat;
    width: 1200px;
    height: 325px;
    margin: 10px;
    margin-top: 0px;
    }
    /*Header-End*/
    
    /*Header-Mobile-Start*/
    @media only screen and (max-device-width: 480px) {
    #masthead {
    }
    /*Header-Mobile-End*/
    
    /*Page-Lenght-Start*/
    @media screen and (min-width: 1100px) {
    	#page {
    		max-width: 1920px;
    		width: 100%;
    	}
    /*Page-Lenght-End*/
    
    /*Page-Backgroud-Color-Start*/
    .site {
        background-color: #000000;
    }
    /*Page-Backgroud-Color-End*/
    
    /*Page-Description-Start*/
    .site-description {
        color: #cc0000;
    	  font-size:140%;
    }
    /*Page-Description-End*/
    
    /*Page-Title-Start*/
    .site-title {
        color: #cc0000;
    	  font-size:140%;
    }
    /*Page-Title-End*/
    
    /*Page-Content-Start*/
    #content-area a {
        color: #fffff;
    	  font-size: 80%;
    }
    #content-area .entry-title {
        color: #cc0000;
        font-size: 100%;
    }
    .content-area {
        color: #fffff;
    	  font-size:120%;
    	  width: 100%;
    }
    	.entry-thumbnail img {
    		width: 120%;
    	}
    }
    /*Page-Content-End*/
    
    /*Page-Primary-Sidebar-Start*/
    #primary-sidebar a {
        color: #fffff;
    	  font-size: 80%;
    }
    #primary-sidebar .widget-title {
        color: #cc0000;
        font-size: 100%;
    }
    .primary-sidebar .widget {
    	   color: #fffff;
        font-size: 80%;
    	width: 100%;
    }
    /*Page-Primary-Sidebar-End*/
    
    /*Page-Second-Sidebar-Start*/
    #content-sidebar a {
        color: #fffff;
    	  font-size: 80%;
    }
    #content-sidebar .widget-title {
        color: #cc0000;
        font-size: 100%;
    }
    .content-sidebar .widget {
    	   color: #fffff;
        font-size: 80%;
    	width: 100%;
    }
    /*Page-Second-Sidebar-Start*/
    
    /*Page-Entries-Title-Start*/
    		.archive-title, .page-title {
        color: #cc0000;
        font-family: "Comic Sans MS" !important;
        font-size: 21px;
    }
    /*Page-Entries-Title-End*/
    
    /*Page-Entries-Description-Start*/
    .taxonomy-description p {
        font-family: Comic Sans MS;
        color: #FFFFFF;
        font-size: 14px;
    }
    /*Page-Entries-Description-End*/
  13. You are welcome.

  14. I have another question :
    How do i enlarge the content area.. the place where the article is..
    It is too small.. and can i make it so it doesn't affect the others sides bars.. even overlap if i want too ?

  15. You can use the following to widen the content area, but with very wide monitor/browser widths, the lines of text become very long and more difficult to read. That is the reason the content width was limited.

    .site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
        max-width: 84%;
    }
    .site-content .wp-post-image {
        width: 100%;
    }
    .post-thumbnail {
        background: none;
    }
  16. Perfect! Thanks for all your help.. ^_^'

    Here's my whole code at this point if anybody in having it :

    /*Header-start*/
    @media screen and (min-width: 1080px) {
    #masthead {
    width: 1080px;
    height: 325px;
    margin: 10px;
    margin-top: 0px;
    position: relative;
    top: 0px;
    background: url('http://i.imgur.com/0T3v8vP.gif') no-repeat;
    background-repeat-x: no-repeat;
    }
    /*Header-End*/
    
    /*Header-Mobile-Start*/
    @media only screen and (max-device-width: 480px) {
    #masthead {
    width: 480px;
    height: 125px;
    margin: 10px;
    margin-top: 0px;
    position: relative;
    top: 0px;
    background: url('http://i.imgur.com/0T3v8vP.gif') no-repeat;
    background-repeat-x: no-repeat;
    }
    /*Header-Mobile-End*/
    
    /*Page-Lenght-Start*/
    @media screen and (min-width: 1100px) {
    	#page {
    		max-width: 1920px;
    		width: 100%;
    	}
    /*Page-Lenght-End*/
    
    /*Page-Content-Lenght-Start*/
    .site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
        max-width: 94%;
    }
    .site-content .wp-post-image {
        width: 100%;
    }
    .post-thumbnail {
        background: none;
    }
    /*Page-Content-Lenght-End*/
    
    /*Page-Backgroud-Color-Start*/
    .site {
        background-color: #000000;
    }
    /*Page-Backgroud-Color-End*/
    
    /*Page-Description-Start*/
    .site-description {
        color: #cc0000;
    	  font-size:140%;
    }
    /*Page-Description-End*/
    
    /*Page-Title-Start*/
    .site-title {
        color: #cc0000;
    	  font-size:160%;
    }
    /*Page-Title-End*/
    
    /*Page-Content-Start*/
    }
    .content-area {
        color: #fffff;
    	  font-size:70%;
    	  width: 100%;
    }
    .entry-thumbnail img {
    		width: 140%;
    	}
    }
    /*Page-Content-End*/
    
    /*Page-Primary-Sidebar-Start*/
    #primary-sidebar a {
        color: #fffff;
    	  font-size: 100%;
    		width: 120%;
    }
    #primary-sidebar .widget-title {
        color: #cc0000;
        font-size: 150%;
    		width: 120%;
    }
    .primary-sidebar .widget {
    	   color: #fffff;
        font-size: 100%;
    	width: 120%;
    }
    /*Page-Primary-Sidebar-End*/
    
    /*Page-Second-Sidebar-Start*/
    #content-sidebar a {
        color: #fffff;
    	  font-size: 80%;
    }
    #content-sidebar .widget-title {
        color: #cc0000;
        font-size: 100%;
    }
    .content-sidebar .widget {
    	   color: #fffff;
        font-size: 80%;
    	width: 100%;
    }
    /*Page-Second-Sidebar-Start*/
    
    /*Page-Entries-Titles-Start*/
    .archive-title, .page-title {
        color: #cc0000;
        font-family: "Comic Sans MS" !important;
        font-size: 21px;
    }
    /*Page-Entries-Titles-End*/
    
    /*Page-Entries-Description-Start*/
    .taxonomy-description p {
        font-family: Comic Sans MS;
        color: #FFFFFF;
        font-size: 14px;
    }
    /*Page-Entries-Description-End*/
  17. You are welcome, and thanks for posting the code.

Topic Closed

This topic has been closed to new replies.

About this Topic