Sela Theme – 3 css enhancements…
-
Wish list for the Sela…if anyone knows how I could do these with CSS please let me know:
1. I’d like the theme to actually be a full screen, full width display of the images…kind of stretch everything to make it wider to fill a 27″ display for example….
2. I’d like to make the main header image be a featured image and then allow readers to cycle through the various portraits on the home page rather than have a stagnant one image
3. I’d like to add another full width block…a text widget that creates another horizontal block under my three categories right now (portraits, architecture, fine art)…I’d like to add a whole block under it to highlight one blog post or more….I hate to have to start over with another theme. This one is close to what I want.
Thank you in advance.
The blog I need help with is: (visible only to logged in users)
-
Hi there,
1. I’d like the theme to actually be a full screen, full width display of the images…kind of stretch everything to make it wider to fill a 27″ display for example….
First off, I would like to offer a link to an article on readability and optimal text line length. I see text on your Gallery pages, and it is in the same div as the galleries, so we can’t widen one without widening the other.
We can do this with some custom CSS, first off, remove this from your custom CSS as it doesn’t have any CSS selector, or any opening and closing curly brackets and is causing a syntax error which prevents the following CSS from being applied.
Then add the following to the very bottom of your custom CSS to widen your site out to infinity and beyond.@media screen and (min-width: 1080px) { .site { max-width: 100%; width: 100%; } .entry-thumbnail img { width: 100%; } .tiled-gallery .gallery-row { width: 100% !important; height: auto; } .hero-content > img { width: 100%; } .content-wrapper .content-area { width: 100%; } .content-wrapper.with-featured-image { margin-left: 0; } .content-wrapper { padding-left: 120px; padding-right: 120px; } }2. I’d like to make the main header image be a featured image and then allow readers to cycle through the various portraits on the home page rather than have a stagnant one image
Sela does not have a page or post slider option, and that is not something that can be added via CSS.
3. I’d like to add another full width block…a text widget that creates another horizontal block under my three categories right now (portraits, architecture, fine art)…I’d like to add a whole block under it to highlight one blog post or more….
As with #2 above, this is not something that can be done with CSS.
-
Thank you for your response to 1 -2-3. Regarding 1., please know I am not a CSS expert, barely a novice…LOL. But I do know I tried copying the code you provided into the home page and it looks like it would work for that one page. But I expected it to work for the whole website – all pages, galleries, blogs (they are really screwy because the blogs accessed from hovering are full screen pages and the ones from the menu blog page are to the side so I’d really like to make them like the hover blog links), etc. When I asked support they said no, I need separate code for each page. Is this true? Seems odd to me. Seems like there should be a “global” area for css that applies to the whole theme. What can i add to the other pages to make them match?
Also, please know I know you said in your 2nd paragraph for “1.” that I needed to delete something. I didn’t quite get what you meant.
-
Hi there, one of the major issues we are going to run into is that the theme actually crops and sizes the images for the space available on the page content area. This means that if we enlarge the content area to full width of the screen/window, we will be asking the browser to enlarge the photos, and that is going to result in a loss in quality. Add the following to your custom CSS and save and then visit your Galleries page to see the results. There are more adjustments that will need to be made, but this is quite an involved change, and I want you to see the results before we go through all the motions.
First off, in the Media Width field below the CSS entry area, put in 2500. Next, paste this into your custom CSS and save and then visit the page and widen out your browser window out to max to see the results.
@media screen and (min-width: 1080px) { .site { max-width: 100%; width: 100%; } .entry-thumbnail img { width: 100%; } .tiled-gallery .gallery-row { width: 100% !important; height: auto; } .hero-content > img { width: 100%; } .content-wrapper .content-area { width: 100%; } .content-wrapper.with-featured-image { margin-left: 0; } .content-wrapper { padding-left: 120px; padding-right: 120px; } .content-wrapper.full-width.with-featured-image { margin-left: 0; margin-right: 0; } .child-pages.grid .hentry { max-width: 47%; width: 100%; } } @media screen and (min-width: 600px) { .child-page { margin-right: 5%; } } -
Thank you so much! I did those two things so far the 2500 and copied the code into css….looking good to me so far…..still some tweaks needed…..BLOGS in the menu…VERY funky…needs help
-
Update: For some reason I had to remove the checkmark in Reading for blogs in order to get the blog page I created to appear in the menu. I then used the menu system to make sure the blogs were under the menu. Worked for most, but one post had to be removed. For some reason it would not size to the page. All is working except the drawback is that I have to manually add each blog to the blog menu in the bar and can’t use the built in link for some very odd reason . But at least they display full screen now. I made a few other changes in that I had to rearrange some images in one gallery in a post, but all seems well to me. Thank you so much. I’ve been wanting to have this appear full screen as long as I can remember.
-
Hi, what you have under “Blogs” are static pages. If you want a blog page where it will show all your posts, you have to write them as “Posts” and then set your “Blog” page as the Posts page in the Reading Settings.
Posts vs Page
Create a Blog PageI would suggest against trying to list all your blogs in the menu since you may eventually have hundreds of posts, and that will make the menu unusable.
-
Yes, I do realize that. That’s what I was referring to in my previous post. I had to change to this because leaving it set to “blogs” screwed up the layout. On this particular theme the blog posts fill up only a half or a third of the page, even when set to the default width. They don’t work at all with the wide theme, and that’s more important to me. these are posts, not pages by the way, but you’re correct in that right now they’re set to static pages. Everything else is working beautifully now, this was the one last thing I had to fix. I didn’t know what code I could use to fix the screwy layout of the blog posts in this theme when it was set to blogs instead of static pages.
Thank you so much for your help.
-
On this particular theme the blog posts fill up only a half or a third of the page, even when set to the default width.
Hi, that space is for the sidebar widgets. Sela does not adjust for when there are no widgets installed. We can adjust the posts blog page, and also the single post pages with the following CSS to make them full width.
.blog .content-area, .archive .content-area, .single .content-area { width: 100%; } .blog .content-area .post-thumbnail img, .archive .content-area .post-thumbnail img, .single .content-area .post-thumbnail img { width: 100%; }You may also want to look at the Dara theme, which is an update based on Sela and looks substatially like Sela. On Dara, if you do not have widgets in the sidebar, the content on the blog and archive pages will automatically adjust and center instead of being off to the left.
-
Dear “thesacredpath” Happiness Engineer — I have been asking WP support how to achieve this with Sela for the better part of this year. The answer has always been the same. It’s not possible. You, in the matter of a few posts, have allowed me to customize this theme precisely (or most of what I wanted…the 100% width was a lot of it) the way I have wanted it to appear for a long time. Thank you so much! That was very kind of you to take the time to do this. I don’t know if you work for WP or are just a guru, but you should work for them if you don’t already. Thank you again!
-
Oh, by the way, I have looked at Dara a few times because of the front page sliding posts. I have a test theme and exported my content from my working site into the test site and it was a disaster. I would have to totally rebuild everything. Sela is now the best I can get it thanks to your kindness and help.
-
You are welcome, and thanks for the kind words. I do indeed work for WordPress.com, and engineering happiness in the CSS forums is what I do. :)
Again, thanks, and if you need additional help, please let us know.
-
I am trying to do another thing on the home page…trying to get the third “FINE ART” widget to span the full width. It is currently under 1. Can you possibly help with this?
-
Hi, that isn’t going to be possible. There are two widget columns that widget area, so the two on the left are in one column and the one on the right is in the other.
-
Hi There – There were 3, before I changed it to 2 this morning. I moved one to under 1 with the hope it would automatically span the 100%. So there are three. I just moved one with the hope I’d be ready for your feedback with code…
-
Well now, with all three there in separate columns, we can do something. See what you think with this.
@media screen and (min-width: 768px) { #widget-area-7 { width: 100%; } #widget-area-5, #widget-area-6 { width: 49%; } #widget-area-6 { margin-right: 0; float: right; } #widget-area-5 { margin-right: 0; float: left; } } -
um…maybe i’m doing something wrong, but it didn’t work.
Since three became 2 under a 1, it is really now a 3 and 4 in a two block grid…could that be it? Here is the css I have at the moment:/*
Welcome to Custom CSS!To learn how this works, see http://wp.me/PEmnE-Bt
*/
.front-page-content-area .with-featured-image .entry-header h1 {
color: white;
}.front-page-content-area .with-featured-image {
opacity: .59;
}@media screen and (min-width: 1080px) {
.site {
max-width: 100%;
width: 100%;
}.entry-thumbnail img {
width: 100%;
}.tiled-gallery .gallery-row {
width: 100% !important;
height: auto;
}.hero-content > img {
width: 100%;
}.content-wrapper .content-area {
width: 100%;
}.content-wrapper.with-featured-image {
margin-left: 0;
}.content-wrapper {
padding-left: 120px;
padding-right: 120px;
}.content-wrapper.full-width.with-featured-image {
margin-left: 0;
margin-right: 0;
}.child-pages.grid .hentry {
max-width: 47%;
width: 100%;
}
}@media screen and (min-width: 600px) {
.child-page {
margin-right: 5%;
}
}.blog .content-area, .archive .content-area, .single .content-area {
width: 100%;
}.blog .content-area .post-thumbnail img, .archive .content-area .post-thumbnail img, .single .content-area .post-thumbnail img {
width: 100%;
}@media screen and (min-width: 768px) {
#widget-area-7 {
width: 100%;
}#widget-area-5, #widget-area-6 {
width: 49%;
}#widget-area-6 {
margin-right: 0;
float: right;
}#widget-area-5 {
margin-right: 0;
float: left;
}
} -
You need to keep the three in separate widget areas. With them in separate widget areas, the code I have will do what you want.
-
LOL…so this is what I started to type….
I am afraid I don’t understand what you are saying. If I have three columns side by side than each image can only be 33% at best.Then I thought, this guy has been GREAT so just DO it …TRY IT…LOL. and it WORKS! HOW I DON”T KNOW!!!! LOL LOL LOL but it works…
I have no idea why or how….but wow…
-
LOL…so this is what I started to type….
I am afraid I don’t understand what you are saying. If I have three columns side by side than each image can only be 33% at best.Then I thought, this guy has been GREAT so just DO it …TRY IT…LOL. and it WORKS! HOW I DON”T KNOW!!!! LOL LOL LOL but it works…
I have no idea why or how….but wow…
- The topic ‘Sela Theme – 3 css enhancements…’ is closed to new replies.
WordPress.com Forums 