Shortcode on homepage
-
Hello,
I’m attempting to make a shortcode for my homepage, and want to know if someone can help me create a border around the grid as well as making it full width. I’m working with the Goran Theme and are unsure of what my limitations are.
Thanks!
The blog I need help with is: (visible only to logged in users)
-
Hi there, can you verify what you mean by “grid”? Are you talking about around the three images together, or do you want a borderline around each individually? If individually, you can give the following a try (and of course change the red color I used as an example.
.grid .hentry { border: 1px solid #cc0000; padding-left: 10px; padding-right: 10px; padding-top: 10px; } .grid .hentry img { width: 99%; } -
Hello,
I apologize, but I realized the shortcode wasn’t going to work as well with my theme. I’m currently trying to make a category page, and I’m a little lost. I wanted to make a page where my company can easily make updates. As far as CSS is concerned, I want to be able to add a featured image to the page as well as add a red font color, similar to the other pages. I also am unsure as to why the LinkedIn account I’ve set up isn’t quite working either. I realize you may not be able to help me with all of this, but whatever you can do would be extremely helpful.
Thanks!
-
I think I’m understanding. Right now you have the N&R News category and also have it in the top menu. The other thing I would suggest would be to set that category as the default category for posts (one less thing for the people posting to have to remember) at Settings > Writing.
An option to the above would be to create a normal page for N&R News and the use the Display Posts Shortcode. It would likely require some CSS work to get them to display like the normal blog posts do, but in this case, you could add a featured image to the N&R News page and it would behave like the others.
On the about page, I see you have added the red color to the bold headings from within the editor itself. We could do that automatically on posts with this.
.hentry .entry-content strong { color: #993300; }With the above, any bold text within a post will be the read color.
-
Hello,
I entered that CSS and nothing really changed. I’m not sure if I’m doing something wrong. I’d love to change into a page, but I was told that wasn’t possible so I ended up just making it a category page and added an image to my post to make it look better. Do you think it looks bad? If it doesn’t look as great, will you help me change it with the appropriate CSS? If it’s going to be a lot of heavy duty work to change it, I’m not sure if I want to play around with it. I would however like to remove a couple of things: the author and the “March 2015 (1)” from all posts. Is that possible?
-
I think it look great with the featured image. The way it is, the content is closer to the top of the page, which is what you want to highlight in this case, and from what I’ve seen, you are using some great and very colorful images and that will draw people down and to the content.
On the post on the N&R News page, there isn’t any bold text within the body (strong). When I click through to the post itself, I see “Current Work” which is a link and text-based links are “a” elements and the bold is set in that CSS. Are you wanting links in red or just your headings that you set to bold?
Are you by chance wanting the post titles themselves in red instead of
-
I would like the headings to be red.
I agree, I’d like to make the featured image that blue image I currently have on the page. But I don’t know how to do that. Can you help me?
-
-
To turn the post title red, you can use the following. The second rule is for the hover color, which you can use and edit if you want, or delete it if you are fine with the tan color.
.entry-title a { color: #930; } .entry-title a:hover, .entry-title a:focus, .entry-title a:active { color: #0000ff !important; }If you also wish to turn the title red on the single post pages (after you click through) you can use this.
.entry-title { color: #930; }Read more link and the little arrow after it.
.more-link { color: #930; } .more-link::after { border-left: 4px solid #930 !important; } -
Putting an image into a responsive width theme through CSS can be tricky. This is about the best we can do. See what you think and make sure and narrow and widen your browser window and also view it on a tablet and phone if you can.
.category-nr-news .hero.without-featured-image { background: url("https://nrengineering.files.wordpress.com/2015/03/shutterstock_91011740.jpg") no-repeat scroll center top; background-size: cover; height: 500px; height: 100%; }The above targets this specific page by using the category name body class so that it doesn’t affect any other pages.
-
Hello, there is an image now! But it doesn’t quite look the same as the other ones. Can we alter the dimensions to make it similar to the others?
I changed the heading color. Thank you so much!!!
Is there a way to remove the author on the post itself? As well as remove the “March (1)”?
-
P.S.-can we change the image on this page:
https://nrengineering.wordpress.com/?page_id=848&preview=true
I think this one won’t drown the logo out like the one we currently have. I apologize for the last-minute change. Your help has been so great.
-
Oops, I somehow used two height settings. Silly me. ;P
.category-nr-news .hero.without-featured-image { background: url("https://nrengineering.files.wordpress.com/2015/03/shutterstock_91011740.jpg") no-repeat scroll center top / cover rgba(0, 0, 0, 0); height: 513px; } -
Hi,
Thanks!!! The image looks much better, thank you.
Is there any way to make it just a little larger? So it’s behind the main nav like the other pages as well?
-
See what you think with this. I changed the height in the rule I gave you above and the added some more in a Media query that limits this change to screens/windows wider than 1020px, which is when the touch menu for tablets and phones activates.
.category-nr-news .hero.without-featured-image{ background:url('https://nrengineering.files.wordpress.com/2015/03/shutterstock_91011740.jpg') no-repeat scroll center top / cover rgba(0,0,0,0); height:600px; } .category-nr-news .site-header { background: rgba(0, 0, 0, 0.224); z-index: 1; width: 100%; } @media screen and (min-width: 1020px) { .category-nr-news .site-header { position: absolute; z-index: 1; background: rgba(0, 0, 0, 0.224); width: 100%; } .category-nr-news .page-title { position: relative; top: 350px; } .category-nr-news .site { position: relative; } } -
You’re seriously a genius. It looks amazing.
Would it be a lot of work to change the image in the CSS? I know, I must sound so annoying, but the logo is kind of getting drowned out. I’ve uploaded a similar photo to media library that looks similar with a darker background. Let me know your thoughts.
Again, you’ve been so helpful and I’m really thankful.
-
You are welcome. Your site is looking totally awesome. Clean, great images, clear presentation and organization of your content. Nice job!!!
-
Wait, can we change the image? The image is located on a “N&R News” static page that is saved as a draft.
I have two more questions, can you help me?
Is there a way to:
1) remove the author on the posts
2) remove the “March (1)” on the posts -
-
To hide the date and author from posts, this will do the trick.
.entry-meta { display: none; }For the image, go to Media > Library, find the image, click on it and you can get the URL for that image on the right module. Replace the URL between the quote marks in the background declaration and all should be good.
- The topic ‘Shortcode on homepage’ is closed to new replies.
WordPress.com Forums 