Sela theme: home page template
-
I am trying out the Sela theme, because I like the look of the home page.
So I have set up the home page, chosen the Home Page template and set up three widget areas (just filled with dummy boxes at the moment).
But I can’t see how to enter text and an image in the “featured area”, which sits above the three widget areas. And at the moment WordPress enters a page title in that area which I don’t know how to remove (it isn’t the featured area text because it isn’t in the right place).
Can anyone help me get this right please?
The blog I need help with is: (visible only to logged in users)
-
But I can’t see how to enter text and an image in the “featured area”, which sits above the three widget areas.
1. How to enter the image. The large image you see in the header area on the Sela support page and the demo is a featured image. That is added in a module which is in ordinarily in the right sidebar area of your page editor by default. If it isn’t there, you might have to open up Screen Options at the top of the page and place a check next to “Featured Image.”
2. How to enter text in the box which overlays the feature image. This part is really simple. The title is the title of your Front Page template page, “Welcome.” The text below it is the content of the page. If Likes and Shares are enabled at Screen Options, you might find Like and Sharing buttons in the overlay box as well.
-
Clarification:
The white box containing your page title and page content, if any, will appear overlaying the featured image as soon as a featured image is created for that page. -
OK thanks for that. I felt it couldn’t be that simple because of the appearance of the charing buttons and the edit “button”, the fact that it was over to the left instead of central, and the fact that I couldn’t remove the page title (i.e. blank it out).
But I will try the featured image and report back.
-
Yes it worked as you said, thanks. But I have another question please.
I am still experimenting, trying to decide if this theme or the Zuki theme give me what I want for my front page. If I didn’t want the large featured image and page text, and just wanted the 3 column widgets (which can include the welcome text) and the 3 column footer widgets – to give a 3 column magazine look to the page), can I remove it?
If I remove the image and the text, I still seem unable to remove the page title, or the white space,
Thanks.
-
If I remove the image and the text, I still seem unable to remove the page title, or the white space…
I’ve just recently discovered that the same thing occurs on the Motif theme. On this theme, and perhaps on any theme, WordPress evidently requires that there be content in one of the three fields: title, page or post content, and excerpt. For awhile on a test site using the Motif theme I was able to keep all three fields all blank, but the next day I was unable to do so.
So my suggestion for how to remove the title from the Sela Front Page template page would be:
1. Put some content in the excerpt field, an HTML tag will do if you want it invisible wherever it might appear (perhaps RSS feeds in this case).
2. After creating an excerpt, invisible or not, you may delete the title and any page content. -
Thank you, that is a most interesting observation and a good solution.
I had been thinking of a different solution. I am intending buying the Custom Design once I decide which theme is the best starting point, and I thought either setting the height of that widget area to 0px or setting display:none, but your solution is much simpler.
Thanks. I am still experimenting, but this is really helpful in helping me decide how I want it to look.
-
It turns out that it’s not quite a full solution. You are indeed correct that putting some dummy HTML in the text (I used paragraph tags), clearing the title and removing the featured image leaves the area free of text, but …
The white space is still there, possibly about 200px of it, and the little edit “button” is still there.
I can probably remove it totally in the CSS using one of the ways I suggested before, but it may mean I will give the Zuki theme a try. Sela is a better visual design, but Zuki has more front page widget areas and hence more flexibility (if it works according to the video and documentation – which I’m not sure of yet).
Thanks again, it has been very helpful in working through the issues to decide the most suitable theme for what I want.
-
Only editors and administrators of a website can see the edit button, plus WordPress staff members.
-
-
Yes, you are correct, the Edit button wasn’t there. (I should have thought of that!) The only remaining problem is the slightly-too-large area of what space, and that should be easily resolved using CSS.
Thanks again.
-
Hi musicdoc1 (or anyone else), I have a further question.
I have installed the Sela theme, purchased the design upgrade, and I have successfully taken out the featured area. But now I am wondering if I can use it in a different way.
I can put 3 columns of text in that space to correspond exactly with the three widget areas below (3 x 30% columns), except when I view in a smartphone sized screen, the three columns don’t behave responsively like the 3 widget areas do.
Do you know what extra needs to be added to make the two behave the same?
(I will also ask this in a more general way on a new topic.)
-
Please use this link https://en.forums.wordpress.com/forum/css-customization#postform so you can copy and paste your text into a thread that will appear in the CSS Forum where you will get the help you need.
-
Hi timethief, as you know, I have posted in the customisation forum. But this question is also relevant to the discussions here on the Sela theme.
Musicdoc1, to elaborate a little. I am far from a CSS expert, but I have successfully modified the CSS for a self-hosted WordPress blog. There, I altered the percentage widths of elements without problem, and I adjusted the media queries so that it changed the page layout at a slightly different screen size. It all worked out fine.
But here if I try that, it is different. Just changing the width of existing elements (in this case widget areas or widgets themselves), or even entering the same widths i my CSS, wrecks the layout for small screens , which didn’t happen on the other site.Presumably it needs me to change the media query as well.
I think I could add to a media query to change the layout of columns in the feature area, if I could find the media query in the CSS, but I’m wondering if Sela works a different way.
So I thought I would seek advice before I tried to experiment. If this is taking you out of your depth, that’s fine, but I thought I’d ask.
Thanks.
-
Things are moving fast. I have learned a lot in the last few hours.
First I learnt how to download a full copy of the Sela theme CSS. Then I added 3 asides in the featured text area and used the css to float them left. Then I found where the media queries were defined, and added the same media query settings for the 3 asides, so they break from 3 columns to one at the same point as the widgets below do.
And it seems to work. So instead of having one row of text widgets, I effectively have two!
Still a bit to work on to fully style it, but I’m on the way, and I thought I just tidy up this thread.
Thanks to everyone.
-
So I thought I would seek advice before I tried to experiment. If this is taking you out of your depth, that’s fine, but I thought I’d ask.
Unfortunately, yes, that is the case. I’ve not experience whatsoever with CSS customization.
And it seems to work. So instead of having one row of text widgets, I effectively have two!
Excellent! Nice work. But what do you mean by “so they break from 3 columns to one at the same point as the widgets below do?”
-
The Sela theme home page has the featured area and then below it three widget areas making three columns across the page. If you reduce the size of your browser window, or look at it on a tablet or smartphone, if the three widgets stay in a line across the page, they would have to be very narrow, and ugly. So the responsive design chooses a point where the three widgets move from being across the page and run down the page, one underneath the others. Try it by reducing your browser window and you’ll see.
So if I want to use the featured area rather than just hide it, to put three more text boxes across the page, just like the widgets go across the page, but change to down the page when viewed on a smartphone, I have to do the same responsive design – which uses widths as percentages and uses a css function called a media query to create the different arrangements for different screen sizes.
Having more or less achieved that now (with a few small layout issues still to work out) I now have two rows of 3 text boxes – one created by responsive divisions (actually I used asides, which are much the same) in the featured area, and one created using text widgets in the widget area. I could have achieved the same thing by putting 2 text widgets in each widget area, but I didn’t know how to make sure they all the second row of widgets lined up at the top, so I thought this was better – and I learned something! :)
Does that make sense?
-
Thanks for the explanation. Perhaps I should learn about CSS before inquiring further. But I’m stubborn. I fail to see how using asides is helpful. An aside is a post format, right?
-
I think the word is used in two completely different ways. Yes, some themes provide a post format they call “asides’ – meaning (I think) a brief post.
But I used it in the context of CSS. I don’t know how much HTML and CSS you know, but web page content is written in HTML, with all text, graphics, etc, labelled with “tags”, then CSS sets how the tagged items will appear. For example, a paragraph is set inside
<p> </p>tags to identify that text is a paragraph (e.g.<p>This is a paragraph.</p>), and then the CSS might say that paragraphs should have red text.The basic layout of a page is often done using divisions, defined between these tags:
<div></div>. The HTML defines the divisions (e.g. header, main text, sidebar, footer) and then the CSS says how big they are and where they’ll be located.In CSS, asides are like divisions – you put sections of the page inside
<aside> </aside>and then use CSS to define how they will appear. Asides are really just different forms of Divs – I think I could have used either, but since the Sela theme used asides for the widget areas, I used them for my columns of text.I’m not expert on these things, but that’s what I’ve figured out so far.
It is cool to learn CSS, because you can use it to modify WordPress.com blogs in a few ways without purchasing the design upgrade. For instance, I used to use a theme whose headings were too small for my taste, but I could use inline styles to make them bigger, just by writing my HTML headings like this:
<h3 style="font-size:250%;">Heading</h3>
- The topic ‘Sela theme: home page template’ is closed to new replies.
WordPress.com Forums 