Menu/Category questions
-
1) Is there a way to add a title underneath the videos on this page (https://grandstandnews.com/category/videos/)? Sort of like a post title/header, but underneath the post when it is in “video” post-format like I have it.
2) Is there a way to change the color of one of my menu items? Specifically, the “VIDEO” menu item? I want to change the color of that one red.
3) I’m also curious to know if I can arrange the videos on this page (actually it’s linking to a category archive, not a page) differently. I want the most recent to be on top on a separate line, and then all other videos fall underneath it. Not sure if this is possible with the theme I have. I’d want the top video to be larger (it would be a live video / most recent), and then the archived/past videos would be the size of the video (smaller) that I currently have on the page. Possible?
Thanks!
The blog I need help with is: (visible only to logged in users)
-
Hi, for #2, we can use the unique menu item CSS id to target just that menu item and change the color. I used the color from Breaking News.
#menu-item-7228 a { color: #ff0000; }For #3, the category items are positioned by the theme php script files using position: absolute directly in the HTML for each entry, so there is not really a way to override that and not run into problems.
-
-
Is there a way to change the title color on the video that is live? Recaps = black, Live = Red?
-
We can use the first-of-type pseudo selector to target only the first video. I’ve also used the category-videos CSS class from the page body HTML tag to target only this category page.
.category-videos .archive__grid .post:first-of-type .entry-title { color: #ff0000; } -
-
And also notice how some of my images are being cut off on my blog post page: https://grandstandnews.com/2015/08/09/hillary-the-great-uniter/
Is there a reason why this may be happening?
-
On the video centering, this will center the videos on the single post pages.
.single .embed-youtube iframe { margin-left: auto !important; margin-right: auto !important; } -
-
On the post you reference, the original image is only 870px wide and the content area is wider than that. WordPress will not enlarge them in general. We can force images with center and “none” alignment to go full width by adding the following to your .aligncenter, .alignnone CSS rule.
width: 100% !important; -
I’m not sure that worked..
Here is the page:
https://grandstandnews.com/2016/10/10/eating-honey-and-pulling-down-pillars/
And here is the code:
.aligncenter, .alignnone { margin-bottom: -.6em; margin-top: 0; width: 100% !important; } -
I take it back. It looks much better on my phone and my computer, but it’s still off on my Microsoft Surface tablet. Any idea why that may be? Obviously, the tablet is smaller. It’s like 11″, compared to my tablet, which is 27″
-
-
Hi, I noticed also that originally the alignnone/aligncenter had a negative left and right margin. Change out your rule to this and see what you think.
.aligncenter, .alignnone { margin: 0 0 -0.6em; width: 100% !important; } -
I think it’s better. The images still are cropped out on the edges (at least on my tablet), but, overall, this is an improvement.
-
Great, glad that helped. I can’t see anyway to fix the clipping. You might want to try an image that is 1.5 to 1 ratio (width to height) as that is what the viewport for the image comes out to.
-
Is there CSS to remove the four columns that I’m using to break up my home page and make it one column for the full page?
-
Hi, to have your home page as a single column, find the following rule in your custom CSS and change the 25% width to 100%.
.display-posts-listing li.listing-item { clear: none !important; float: left; font-size: 1em; padding-right: 15px; width: 100%; }
- The topic ‘Menu/Category questions’ is closed to new replies.