New Featured Pages — CSS Help!
-
Hi!
There’s a few things on https://www.juvconsulting.com that I wanted to emulate on my site. I asked for help in chat, and they gave me a few tips and pointed me to this forum.
1. I want to create a ‘services’ area just like the one on that site. It’ll have a pale tan background, just like the ‘What is CareerFear’ featured page on the home page, 1 row and 3 columns. I was told to use an HTML table generator, but I’m really unsure as to how I can go from generating a table on there, to the finished look I’m going for (same as on https://www.juvconsulting.com).
2. Similarly, how do I emulate their ‘As Featured in’ page from scratch?
The blog I need help with is: (visible only to logged in users)
-
Hi tanishqkumar,
I would recommend you find some premium theme that would fit your needs. There are some great ones for consulting services that you may like.
Also, you might want to consider buying the Business plan. It will allow you to have advanced design customization.
You can check for more details on the Business plan here:
https://wordpress.com/pricing/In the end, you can search for developers help here:
https://jobs.wordpress.net/Please let me know if you will have any further question.
Cheers!
-
Hi @tanishqkumar,
I’ve spent some time thinking about and working on your ideas here. So far, I only have a possible solution to part 1 and so that’s what I’ll cover here for you. This solution does not use CSS, but instead takes advantage of the grid template available in Appetite.Idea #1: Adding a “Services” area
1. Create Feature Page: What’s nice is that you already have a premium theme that’s capable of doing something like this. What’s also great is that you only want to list 1 row with 3 columns. In order to do this you’ll need to make a top level “Services” page. Leave this page blank, but In Page Attributes please make sure the page template is set to Grid Page.
2. Create Service Pages: Now make 3 pages (one for each service) named what you want the services to be named. For each of these pages open Page Attributes and click on the radio button next to Services. This will make it a child of the Services page. Each of these pages should have an image and a brief description of the service. This brief description can be followed by a <!–more–> tag if you’d like to make the full page more content rich.
3. Add to Home Page: Now in My Sites -> Themes -> Customize -> Theme Options you should find settings for Front Featured Page #1, #2, #3. Make one of these the Services page and make sure the Content Position is set to Center.
That should work. This should display a single row with 3 columns. The items across will display a picture and a brief description of the service and then if there’s a <!–more–> tag it will display a button telling people to read more about that particular service. The default background color for this should be #F4F2E6 which, I think, is the light color you were talking about?
I will continue to work on the ‘As Featured In’ page. Please let me know if there’s anything about this that doesn’t work for you or fit your original concept.
-
Thank you for the response @lastfarthing! I was told to do what you’ve suggested, but then each of the three columns has to be links to a child page, like you’ve said. I just need icons with some text underneath, I don’t want them to be links to any other pages. Just the aesthetic and some information, no links to anywhere. What do you think?
-
Hi there, this is going to be hard to do with the Appetite theme. For the As Featured In, you would need to create a page and then add that page to one of the featured page sections in Theme Options in the Customizer. The problem is, that section will be styled similarly to the What is Careerfear section on your home page now.
Appetite really isn’t structured to where we can do this sort of thing, and really, tables aren’t the best option because they just aren’t good in responsive themes.
I would suggest looking at the Corporate theme, which will get you much closer to what you are wanting. It will still take some customizations, but starting with it, we can make those customizations more easily. Here is a link to the Setup document for Corporate.
-
@tanishqkumar,
Ok, I see where you’re going with this. I’ve thought about it and experimented a bunch and I think this is what you’ll want to do. Follow all of the steps as outlined above for setting your table up as a collection of grid pages and make note of which “Front Featured Page #” slot you’re using. In my case, I set this whole thing up as Front Featured Page #2 in My Sites -> Themes -> Customize -> Theme Options.Now go to Additional CSS and enter the following:
.featured-page-two .grid-item .entry-title { display: none; }If you’re using a different featured page # you’ll need to modify the code to say featured-page-(page #).
This should make the links to the individual services pages just disappear. Nobody will be able to click through to the actual page, and so all they’ll see is the picture and a little text underneath it embedded in your front page.
I’ll continue to work on the “As Featured In” section as I have time. Please let me know how this turned out for you :)
-
Hi @lastfarthing, thanks for your efforts! Much appreciated! It worked aside from the fact that the CSS you gave me didn’t work, despite setting the ‘Services’ as Featured Content 2, the links are still there, and still take the user to the child page.
Also, I’m not sure how I can change the size of the image showing up on the featured content area on the home page, all the icons are different sizes right now, but the hyperlinks are definitely still function, which is a problem. Aside from that, though, your steps worked great!
Thank you, let me know if you come up with a solution for the links :)
-
@tanishqkumar,
I’m having the same issue now. The code isn’t changing how the page looks in the editor, but the changes are showing if I click Save & Publish and then visit the page directly. The code I am using to remove the child page links and borders is this:/* removing links and bottom border from featured-page-two section */ .featured-page-two .grid-item .entry-title { display: none; } .grid-wrapper .grid-item .entry-header:after, .grid-wrapper .recent-post .entry-header:after { border-bottom: none; } -
@lastfarthing The code worked in that it removed the borders nicely. However, if you click on the images, even on the real site, the links are still there :(
-
@tanishqkumar That’s odd. The images shouldn’t be clickable… Are the images on the child pages links?
This is what my test child pages look like:
<img class="alignnone size-medium wp-image-15" src="imagepath.com" alt="" width="300" height="71" /> Some textCan you link me to your page? I’ll try to see if there’s something different going on here.
-
@tanishqkumar,
Update. I’m seeing it on your homepage and there are no links or borders. I can’t click through to any of your child pages :)You’re right that the images are a little off. They’re all the same standardized 512×512, though, so I’ve adjusted the code to scale them. As for lining up your text, just try to make sure that on the child pages there’s the same amount of spacing between the image and where the text begins. Here’s the (possibly final) css for that section.
/* Code for the featured-page-two content */ .featured-page-two .grid-item .entry-title { display: none; } .grid-wrapper .grid-item .entry-header:after, .grid-wrapper .recent-post .entry-header:after { border-bottom: none; } .featured-page-two img { width: 256px; }In featured-page-two img you can adjust the width to whatever looks good to you. 256px is half the size of your original icons.
-
@lastfarthing thank you! Your code worked, now I just need to know how to move the icon of the TV up a little bit so it’s in line with the other two, and how to remove the faint vertical lines in between the icons!
-
@tanishqkumar I see that the words Interviews, Internships and Workshops all line up across the page so my thought is that there must be some kind of difference in the child pages. Can you verify that the picture is placed in the same position and has all of the same settings in all 3 pages?
As for the faint side borders, I’m working on that but I’m having a really hard time finding anything in the css about it. It’s probably either something really obscure or really obvious.
-
@lastfarthing I’ve sorted the lines and alignment out.
I just want to really genuinely thank you for taking time out to help me, I really I appreciate it ;). Can l be in touch about a few more code tweaks I’d like to do on the site, shall I continue talking on this forum, or can I reach you elsewhere?
-
@tanishqkumar Right on! I love the way it looks. I’m still working on part 2 of your original question so feel free to post any follow up you have in this thread.
By the way, how did you get rid of the lines? I obviously missed it somehow but I really thought I searched everywhere!
-
@lastfarthing, the code is:
.site-content .grid-wrapper .grid-item, .site-content .grid-wrapper .recent-post { border-right: 0; }I’ll be in touch soon about more tweaks! :))
-
@tanishqkumar,
Thanks for that. Seems pretty obvious but it didn’t occur to me to look for a “border-right” at the time.Regarding Part 2 of OP
So concerning your “As Featured In” section there’s a couple of ways you could go with that. The easiest would be to use the Testimonials feature already built into your theme. My Sites -> Themes -> Customize -> Theme Options -> Front Testimonials. Turning on Front Testimonials creates a testimonials section underneath “Front Recent Blog Posts”.
This section by default displays a very small, oddly formatted picture with an excerpt that can contain links.Given that information, I’ve worked out this plan. Please let me know what you think:
1: Create 5 testimonials. Each one should have a featured image and the body should contain a brief excerpt and a link to somewhere.
2: Now go to My Sites -> Themes -> Customize -> Theme Options -> Front Testimonials and check the box to display testimonials.
3: Now go to Additional CSS and paste this code:
/* Tranforming the Testimonials Section */ .homepage-widgets .testimonial-block .testimonial-pager li img { border-radius: 10%; } .homepage-widgets .testimonial-block .testimonial-pager li a { width: 136px; } .testimonial-block h4 { display: none; } .homepage-widgets .testimonial-block .testimonial-author:before { border-top: none; }Let me know what you think. It’s not an exact replica of what they have over at Juv, but it does leverage the built-in capabilities of your theme.
-
@lastfarthing, thanks for that! I tried it out, and it looked good. I’m sure with a few CSS tweaks we can rearrange it to more match JUV, however, I’ve put that on hold because currently the priority is our ‘Internships’ page (the actual one, not the one I made for the icons).
I got some help creating CSS for the ‘Internships’ page at the top. It’ll have a line asking the person where they live, and two options based on that. When they click on one or the other, they should be taken to an identical page, except with 8 options this time. I was unsure about how to make the pages: I don’t want to create another separate page with 8 options, but instead want it to just be a follow up page under ‘Internships’. Clicking on the 8 options will pop up a google form, which I know how to embed. The formatting of these pages is crucial.
Thank you!
-
@tanishqkumar,
Ok, I think I can help you achieve that. It seems like you’ll just want to have hidden sections that are set to display when you click on the correct button. Paste the additional CSS you’ve used to style your Internships Page and the html you’ve written for it. I’ll recreate it and run a test. -
@lastfarthing, thanks for the response.
HTML:
I live in:
<div class=”flex-holder”>
<div class=”button”>Option One</div>
<div class=”button”>Option Two</div>
</div>CSS:
.flex-holder {
display: flex;
justify-content: space-around;
}.button {
display: inline-block;
padding: 12px 24px;
border-radius: 6px;
border: 0;
font-weight: bold;
letter-spacing: .0625em;
text-transform: uppercase;
background: #615f8b;
color: #fff;
}/* Add a rollover background colour but keep the text white */
.button:hover,
.button:focus,
.button:active {
background: #b7b6cd;
color: #fff;
}.page-id-2003 #primary-header {
height: 0 !important;
visibility: hidden;
}.page-id-2003 #primary {
margin-bottom: 35%;
}I’d like the buttons to be rectangles with sharp edges, #fafafa colour (but still glow when hovered over as they do now). I’m also aiming to have the text (one sentence on each page) in a large (h2/h3) font with a short black
under it, and the buttons in rows under that. On the page with the 8 buttons, I’d need them in 2 rows of 4, but I’ll have to learn how to manipulate them myself afterwards.
Thanks!
- The topic ‘New Featured Pages — CSS Help!’ is closed to new replies.
WordPress.com Forums 