Menu/Category questions

zacheryhenry · Member · Oct 19, 2016 at 3:32 am
Copy link

Add topic to favorites
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)
zacheryhenry · Member · Oct 19, 2016 at 3:34 am
Copy link
Figured out #1. Just need help on #2 and #3.
thesacredpath · Member · Oct 19, 2016 at 8:39 pm
Copy link
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.
zacheryhenry · Member · Oct 19, 2016 at 10:03 pm
Copy link
Thanks!
zacheryhenry · Member · Oct 19, 2016 at 11:25 pm
Copy link
Is there a way to change the title color on the video that is live? Recaps = black, Live = Red?

https://grandstandnews.com/category/videos/
thesacredpath · Member · Oct 20, 2016 at 6:31 pm
Copy link
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;
}
```
zacheryhenry · Member · Oct 21, 2016 at 12:50 am
Copy link
Is there code to center the video on the page? My “centering” button isn’t moving it…
zacheryhenry · Member · Oct 21, 2016 at 4:27 am
Copy link
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?
thesacredpath · Member · Oct 22, 2016 at 6:54 pm
Copy link
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;
}
```
zacheryhenry · Member · Oct 22, 2016 at 6:58 pm
Copy link
Perfect – thank you!
thesacredpath · Member · Oct 22, 2016 at 7:02 pm
Copy link
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;
zacheryhenry · Member · Oct 22, 2016 at 9:52 pm
Copy link
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;
}
```
zacheryhenry · Member · Oct 22, 2016 at 9:59 pm
Copy link
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″
zacheryhenry · Member · Oct 22, 2016 at 10:00 pm
Copy link
Compared to my PC monitor*
thesacredpath · Member · Oct 25, 2016 at 3:25 am
Copy link
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;
}
```
zacheryhenry · Member · Oct 25, 2016 at 3:36 am
Copy link
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.
thesacredpath · Member · Oct 27, 2016 at 5:33 am
Copy link
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.
zacheryhenry · Member · Nov 8, 2016 at 10:49 pm
Copy link
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?
thesacredpath · Member · Nov 8, 2016 at 11:48 pm
Copy link
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%;
}
```

No items found.