Some Upgrades to Custom CSS
-
Heya! Been a while since we passed there to get some custom CSS upgrades to the website, so i guessed it was already time!
So here is what we would like to do this time :
1 – A post password protection picture that changed based on the category of the articles (change only on one category).
Right now, we were protecting some pictures on one category, which needs to keep the same picture for it, but soon we wanna bring a new category which would need a different picture on its own category.
Here is the code we use :.post-password-form p:first-of-type { display: block; background: url('https://laynaria.files.wordpress.com/2018/03/barbelocked_v2-840.png') no-repeat scroll center top / 100% auto; padding-bottom: 70%; color: transparent; }(The second category isn’t made yet but it’s the most important change we would like to get)
2- A little upgrad to our header custom css, if it would be possible to get a more responsive header image we add to the theme, so we could make a pretty cool Band or Strip with our characters that would change size with the screen/phone mode etc. (the least important upgrade we want)
Here is the code we use right now :.site-header { background: url('https://laynaria.files.wordpress.com/2018/01/headerlaynariav2.png'); background-size: cover; }3- The last upgrade we would like to get, which is really important too is to get a better previous/next article option. Right now it puts the previous/next article in the articles based on which one was posted after or before, without taking into account the categories. What we would like is to change that so it only show the previous/next article based on the category. Cause the new project we intent to bring is a new comic with a story to follow, so it really needs that so readers enjoy reading it without needing to go back to the category, find the next entry they want etc…
Also, maybe if we could put the featured image that goes with it like the additional option we use right now to show some articles based on the key-words that would be cool!The blog I need help with is: (visible only to logged in users)
-
Hi @laynaria, let’s take these one at a time.
1. It would be difficult to generate any CSS for a category that doesn’t exist yet. But once you’ve got the category and the image you want to use, we can sort things out. Let us know when you’re ready to work on that.
2. Can you clarify what you’re hoping for in a more responsive header? Again if you have a specific image in mind (or even a simple sample of an image) we’ll get a better idea of what you’re after.
3. This isn’t possible with CSS, sorry. CSS controls the way the page renders HTML, but it doesn’t change the HTML itself, so the links would not change. You could hide previous and next if you’d like, and only show related posts. I couldn’t see a good way to show next and previous from the current category though.
-
Heya @supernovia !
1 – Well for 1, we already know the category name (which will be a sub-category), we could have made with “categoryname” and “picturename.png” for example if you wanted! But i could create the category already, and test it with not putting it in the menu for now!
Anyway the Category name is Ré-Incarnat° we already created it. We have yet to make the picture though, but we could test another one in the meantime.2 – Well right now we used a simple picture for the header, a simple color transition blurred. But when we look at it with different size of window, it doesn’t transform that well. (The picture can’t completely adapt. For this picture it’s okay, but if one day we want to bring for example a Band with mutliple characters, it will most likely resize in a way that makes it ugly.
Anyway, like i said this one isn’t that important, since it’s more about thinking about the future! ^^3 – Well for now it could be good to just hide previous/next article if you can help us for that. Too bad we don’t have a better way to make the previous/next article divided into category only :/
Maybe an add-on when we can upgrade the website?Anyway thanks for the replies :)
-
OK :)
1 – Can you send a link to the category, the page you want to change, and the image you’d like us to work with for this example?
2 – Header images really can be tricky to make them responsive. You can try making something that fits the width of the phone and height as it changes plus looks good in wider browsers… or you might use something besides a header / featured image to show the band. Just remember in most themes, header/featured images will be cropped depending on the screen size (and it will also be cropped on Facebook or Twitter when people share there). Content images should always display the full image despite the device.
3 – If you upgraded to business you possibly add a plugin or child theme to fix that, sure. For now, this will do:
.entry-footer .post-navigation { display: none; } -
1 – So first, here is the link of the category : Category Link!
For the test picture, in the meantime to prepare everything, we’ll use this picture : Picture
That way we can differentiate it from the picture of the actual locked contents.If you want to see an example of an article blocked on others category : Example
2 – I see maybe making a featured image could be a good idea yeah, we could test that to see if it could upgrade the design a good way. Yep responsive is kinda a problem for some designs, like background which would be cut based on people’s screen, making it suck for a lot of people, that’s why we removed the possibilities of upgrading it.
3 – Okay thanks it’s better that way for now! Hope we get a good plugin once we go business.
-
Okay. For the category images, here’s what you can do.
1 – Change your existing CSS to this:
.category-tresor .post-password-form p:first-of-type { display: block; background: url('https://laynaria.files.wordpress.com/2018/03/barbelocked_v2-840.png') no-repeat scroll center top / 100% auto; padding-bottom: 70%; color: transparent; }2 – Add this for your other category. I’m assuming the image will be the same size:
.category-re-incarnat .post-password-form p:first-of-type { display: block; background: url('https://laynaria.files.wordpress.com/2018/03/barbe_locked.png') no-repeat scroll center top / 100% auto; padding-bottom: 70%; color: transparent; }Can you try that and let me know how it goes? We’ll move on to the header part once this is resolved.
-
Okay! It seems to work really well!
If you wanna see :
Category “Tresor”That way we’ll be abble to copy this way of doing when we make news categories with hidden posts too! :3
Also here is a bug that comes from the code, that maybe we could resolve :
SomeText that appears when you try to select things on the pageIt’s not that much of a problem but wanted to show that! Cause maybe there could be a little thing to do about it :)
Also, on our category pages / news pages, when we do protected articles, it doesn’t show the “extract” catchphrase we put for the article for those protected articles. I was wondering if there was a way to go arround that so it’s show the extract instead of “there is no extract for this article, because it’s protected”.
Anyway, thanks a lot already for those upgrades! It’s really something cool for us to be abble to show different pictures based on the category! :)
(We’ll link ya how it looks like once we’ll finish the new picture ^^) -
Also here is a bug that comes from the code, that maybe we could resolve :
SomeText that appears when you try to select things on the pageI couldn’t duplicate this… can you send more info?
The excerpt cannot show for password protected articles, though. The entire post will be private except its title and featured image.
-
Technically i showed you the image link :
It shows the text that appears when you do a mouse selection (blue selection). It shows some text that the coder who made the code for us couldn’t remove xD
That’s sad about the except :/ We use the except to “tease” a little. The password for the privates articles are for people who donates us on Tipeee. (French Patreon)
So the except would also be a tempting little sentance to tease people. :/ -
Have you been able to show the excerpt on private articles before?
Also I saw the bug image, but I don’t know the steps to bring up that text. I can’t make it appear here. What did you click on to make that text appear?
-
Ah to show the text i just simply pressed button without release to do a selection, and when you do so you can make the text appear just by selecting that way.
For the excerpt : no we’ve never been abble to sadly, it’s just that we hoped we could.
Cause we put an excerpt ourselves for each articles, and having one for articles that are locked could have been a way to tease even more people.
We’ll wait to upgrade website into business, maybe at that point there will be a plugin for it… Maybe. -
Ah, okay, it only shows when you highlight parts of the page? I see you’ve added a fix, but display: none might work even better than transparent.
About the excerpt: yeah that’s never been a feature as far as I’m aware, at least without a plugin, and with plugins you might have better options anyway. I’ve added a feature request for you though.
-
About the “display : none”, sadly it doesn’t work > the picture disappear at the same time. x)
Sad part too about the “Previous/Next” post article based on category is that there is a feature to do it with php :
<?php previous_post_link('« %link', 'Previous post in category: %title', TRUE); ?> <?php next_post_link('%link »', 'Next post in category: %title', TRUE); ?>But since we can’t modify a theme’s php, we have no way to change that :/
-
If you want to see the result of the new category :
https://laynaria.com/2018/05/15/re-incarnat-1/ -
When you go to a business plan, you can use a child theme to add your own PHP. Sorry there’s no way to do it with CSS.
CSS just controls how the content on the page is displayed. PHP controls what content is there to work with.
-
So with a chil theme plugin, we’ll just have to add the code we just showed earlier so it changes the theme we currently use?
Or it’s a little more complicated than that? -
It’s more complicated than that, but you can read about it here:
https://codex.wordpress.org/Child_ThemesYou might also be able to find a plugin that does it for you.
-
I see, yeah seems pretty complicated i’d need to read it carefully if i want to do that.
- The topic ‘Some Upgrades to Custom CSS’ is closed to new replies.
WordPress.com Forums 
