Size of the primary and the secondary sidebar identical, text field enlarging

  • Unknown's avatar
    brazilinhotpants · Member ·

    Theme: Oxygen
    If possible I want the size of the primary and the secondary sidebar identical, which opens the possibility for the main text column to be enlarged to (preferably) 540 pixels (13,72cm with 100dpi).Primary now is: 160 px, Secondary is now 250 (Can go back to 160 also).
    Text column is 470, with secondary back to 160, Text column could go from 470 to 540.
    Is there somebody who can tell me what and how to do it?
    Anton Steeman

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, in the Oxygen theme, and most other responsive width theme designs, the main page elements (sidebars and content area) are set in a percentage with so that the maintain their relationships to each other on narrower window settings, at least down to the point where the sidebars are moved below the content so the content can have ample width.

    Although the above can be changed for the home page of your site, the size of the featured images is set in the theme files and cannot be altered. We can, with CSS, ask the browser to enlarge the featured images so that they again fill the area, but in doing so, the images will lose quality.

    If you want to do this, let me know and I’ll work out the code for you. It takes a bit of time to do it in such a way that the site will still look good and work well on smaller devices (tablets and phones).

  • Unknown's avatar
    brazilinhotpants · Member ·

    Thanks for your answer. I understand what you are saying. If you mean with the featured images the slide show that’s not what I want to change. The size of the slide show is alright.
    At this moment the primary sidebar has a width of 160 px. The secondary one 250 px and the text bar 470 px. That is: 18.2 – 28.4 – 53.4% resp.
    If we talk in percentages for the 160 – 540 -160px I want, we talk about: 18.6 – 62.8 – 18.6% resp.
    As all my images are set (uploaded) at 540px by 100dpi, I think I don’t have to worry about the images losing quality, but I’m not sure about that. The videos I have to adapt probably. I have to see whether I have to change the images of the secondary sidebar as they get smaller. The primary doesn’t change.
    What do you think? Is it feasible to come to a good result? I’m quite proud of my blog and I want to keep it in good form.
    Like to hear from you
    Anton

  • Unknown's avatar
    thesacredpath · Member ·

    The left sidebar percentage is a percentage of #main. The right sidebar is a percentage of #content-wrap, which is within #main, so the percentages are not equal #content-wrap is narrower overall.

    The featured images I’m talking about having to enlarge are the ones within the Recent Articles section. Add the following CSS, which uses a media query to limit this change to window/screen widths wider than 768px, which is where the theme moves the right sidebar down below the content area. I’ve done this to preserve the responsive design so that things work nicely on tablets and phones.

    @media screen and (min-width: 768px) {
    .page-template-showcase-php #tertiary {
    width: 21%;
    float: right;
}
.page-template-showcase-php #content {
    margin-right: 25%;
}
}

    If you maximize your browser window, you will see that the featured images in the Recent Articles are now no longer the full width of the content area, and the width of the images is set in the theme files, not in the CSS. Further more, those featured images are created by the software at the size you see them and are not just a shrunk version of the original image.

    After playing with the above, replace the code with the following in which I have also included code to make the browser resize the images to full width of the content area and look at the image quality to see if that change is something you can live with.

    @media screen and (min-width: 768px) {
    .page-template-showcase-php #tertiary {
    width: 21%;
    float: right;
}
.page-template-showcase-php #content {
    margin-right: 25%;
}
.featured-image img {
    width: 100%;
}
}
  • Unknown's avatar
    brazilinhotpants · Member ·

    Thanks, I will experiment the codes today and keep you informed.

  • Unknown's avatar
    brazilinhotpants · Member ·

    This is perfect. You see the secondary sidebar isn’t dominating anymore and just is, like the primary sidebar, a list of connections to articles.
    I see that the changes only are for the home page, the article index haven’t changed and the individual article pages also not.

    The images of the featured articles are clear enough. When I play with my browser on my screen (size 29″), it stays perfect, from small too full screen. However what I hoped for, that the main textbar of each individual article should also have changed to make, in my opinion, for better reading isn’t accomplished. Any problem with this, or am I asking to much?

    As we are successful at this moment, can I ask one more question. Standard there are 3 featured articles (home page) below the slide show. Is it possible to add 3 more, so that I have 6 in the slideshow and 6 featured articles with image below the slideshow.
    Anton

  • eurello · Staff ·

    Hi Anton,

    The CSS Richard provided targets class “.page-template-showcase-php”, which is the class for the special homepage template. To do the same to the default page template and single post pages, you’d want to add CSS snippets targeting those page types.

    The single post page class is .single-post and the default page template is .page-template-default, so you might try something like this: 

    @media screen and (min-width: 768px) {
	.page-template-showcase-php #tertiary {
		width: 21%;
		float: right;
	}

.single-post #tertiary {
		width: 21%;
		float: right;
	}

.page-template-default #tertiary {
		width: 21%;
		float: right;
	}

.page-template-showcase-php #content {
		margin-right: 25%;
	}

.single-post #content {
		margin-right: 25%;
	}

.page-template-default #content {
		margin-right: 25%;
	}

.featured-image img {
		width: 100%;
	}
}

    Note that you might want to make the percentages different for the other two types of page layouts, since they aren’t quite the same as the showcase page.

    Let me know how that works out.

    As we are successful at this moment, can I ask one more question. Standard there are 3 featured articles (home page) below the slide show. Is it possible to add 3 more, so that I have 6 in the slideshow and 6 featured articles with image below the slideshow.

    This isn’t possible – the three posts are set by the theme.

  • Unknown's avatar
    brazilinhotpants · Member ·

    I copied your code in the CSS. Initially it looks good, but I have the impression that it needs some adjustments, as you explain for the perecentages. Ley me work this out a bit further.
    Thanks sofar. I come back to you, if any problem hits me in the face.

  • Unknown's avatar
    brazilinhotpants · Member ·

    It took me some days to work this out. Sorry for the delay. After implementing the codes you gave, we have the following situation:

    To discuss the secondary sidebar (which size we changed) we compare it to the right hand photo in the header (the market vendor with tomatos = set for comparison to 6.4cm))
    The header image doesn’t change when we go to the other pages.

    Home page:
    sidebar image is roughly 5.2cm

    Article index:
    I have the impression that the sidebar image didn’t change. Is still 8.3cm

    Pack Dictionary:
    Sidebar image has 6.5cm width

    About:
    Sidebar image has 6.5cm width

    Individual article:
    Sidebar image has 6.5cm width

    So we have 3 sizes left.
    If it gives a problem to change the home page from 5.2 to 6.5cm. Let’s leave it. For the home page it’s not really a problem.
    However what I like to change is the sidebar width of the Article Index from 8.3 to (more and less our standard now) 6.5cm (Sorry I can’t measure in px)

    Primary sidebar is 4.7cm
    Main text 17cm

    The images in the main text column, which had standard 540px by 100dpi and were resized automatically to 470px to exactly fit the width of the (old) text column, are now smaller than the text column, whatever size or number of px I give them. In other words, apparently, they still are automatically resized (I think) still to 470.
    Can we change that to the width of the new text column? Note that the slideshows (the black background anyway) have changed to the width of the text column. The videos, which were set by me at 470, I have changed to 540, which perfectly fit the text column width. 540 seems to be the actual width of the text column.
    You can best observe all 3 features in: http://bestinpackaging.com/2014/05/09/interpack-2014-picking-up-the-naked/ (Note: there is one image with caption, that doesn’t take centre stage, whatever I do)
    All is well, except that we have to change the automatic setting of the width of images from 470 to 540.

    I hope you still can find some time to assist me with this.

  • eurello · Staff ·

    Hi Anton,

    I’m not sure I entirely follow exactly what steps you’d like to take now.

    For images within posts, you can choose to make them full-size, large, medium or thumbnail, and you can also define which exact sizes those represent in Settings->Media here:
    https://bestinpackaging.wordpress.com/wp-admin/options-media.php

    Your default content width (for images and other media) is 470 pixels, but you can make it larger by changing the content width setting at the bottom of the CSS editor:
    https://bestinpackaging.wordpress.com/wp-admin/customize.php?url=http%3A%2F%2Fbestinpackaging.wordpress.com%2F2014%2F05%2F09%2Finterpack-2014-picking-up-the-naked%2F

    To make the archive pages match the showcase and single-post pages, try adding this along with the other CSS (within the same media query):

    #page #tertiary {
	width: 21%;
	float: right;
}

#page #content {
	margin-right: 25%;
}
  • Unknown's avatar
    brazilinhotpants · Member ·

    Eurello, thanks for your instructions and sorry for the delay, but I’m in the Amazonia delta at this moment and my internet connections often is very weak. Anyway I folowed your line and it’s working properly.
    There is one point I don’t understand. The secondary bar of the home page has a different size than the other 3 page templates. I don’t know why, but forget it, as I like it the way it is.
    All images have the right text column width at this moment.
    Perfect, thanks a lot and (if you allow me) I might come back with a completely different question for the website. But that will take some time, as I travel to Europe first with a busy program.
    Over and out for the time being. Problem solved.
    Anton

  • The topic ‘Size of the primary and the secondary sidebar identical, text field enlarging’ is closed to new replies.