Archived topic
Colour based on title
9 replies · Started by Matic on December 18, 2020
Hi,
I am creating a new layout for my website. This question is that GeneratePress related, but since I am using your elements to do this, I am hoping you can at least give me some guideline or a right direction as how to solve this problem.
Example posts:
Example #1
Example #2
I am using this with Elements > Header
<div class="post-new">
<h1 class="post-title-new">
{{post_title}}
</h1>
<p class="post-date-new">
{{post_date}}
</p>
<div class="post-thumbnail-new">
{{custom_field._thumbnail_id}}
</div>
</div>At the moment, my class "post-new" has the following feature:
background-image: linear-gradient(rgb(255, 255, 255) 0%, rgb(200, 180, 230));
But let's take a normal background to simplify this:
background-color: #E6C8B4
I was wondering how could I make it so that the background-color would be defined based on the URL? I want to create a background that would fit the image colour. I know I could use JS to do that, but that's an even bigger mess.
I don't mind specifying a table in advance, that would look like this, for example:
URL HEX
URL1 HEX1
URL2 HEX2
etc
I could then use some kind of PHP, such as (I am making it up because I don't know PHP):
URL = {{post-url}}
for URL$ = HEX$and the HTML (only the first div)
<div style="HEX$"></div>
Does any of this make sense? :D
Cheers,
Matic
Hi,
Are the URLs static? or are they the actual URL or the current page?
Or perhaps you want the hex color change depending on post type(page, single post, archive, etc)?
Let us know.
Hey,
the URLs change based on the post. I want this code for single posts only, and each has a different URL.
Nope, I want the HEX based on image average, a thing can be done with JS, but I don't mind providing HEX manually. I know I could do this by creating separate header for each post, but that would leave a mess after a while. Or do you think that this is a better option?
Cheers
Hi there,
heres a an example that uses custom fields to set the background color of the page-hero:
https://generatepress.com/forums/topic/using-custom-field-page-values-in-element-header/#post-985694
The same logic applies - you just need to load the $css variable with your color options - and target the correct selector in the echo statement.
To be fair, I cannot figure out what to do beside adding a PHP hook.
I have this HTML now (in a header):
<style>.post-new {background-color: {{custom_field.css}}}</style>
<div class="post-new">
*some code*
</div>This PHP (in a hook):
<?php
$css = get_post_meta(get_the_ID(), 'css', true);
if (!empty($css)) { ?>
<style type="text/css">
<?php echo ' .post-new {background-color: ' . $css .';}'; ?>
</style>
<?php }
?>I suppose I should add some CSS with post IDs now, but I don't know where and how.
This doesn't work (obviously):
#post-8321.page-hero {background-color: red;}
Cheers
How many colors are we dealing with ? Will each post have a different color ?
That was the original idea, but if that's too difficult (and would mean too much CSS), I could do with only 7-8 colours (red, orange, etc).
With this snippet hooked into the wp_head
<?php
$css = get_post_meta(get_the_ID(), 'css', true);
if (!empty($css)) { ?>
<style type="text/css">
<?php echo ' .post-new {background-color: ' . $css .';}'; ?>
</style>
<?php }
?>You can just create a Custom Field in the Post editor - see here:
https://wordpress.org/support/article/custom-fields/
Give the Field a Name of css or whatever name you give it in this line of the code:
$css = get_post_meta(get_the_ID(), 'css', true);
And set its Value to the HEX/RGBA you require.
This will print out that CSS for each post.
Ok, I finally understand! It works like a charm now + I can give each post its own background.
Thank you very much :D
Cheers
Glad to be of help!
