I have tried to add content in the custom description tag using a code in the functions php as seen below. I want to add a background color to this section, but the background color stays white (default).
I am using this code;
add_filter( 'the_content', 'wpglorify_custom_description_tab' );
function wpglorify_custom_description_tab( $content ){
if( is_product() ) {
$content .= '<p>[vc_section][vc_row full_width="stretch_row" equal_height="yes" content_placement="middle" fullwidth="1" css=".vc_custom_1648468332011{background-color: #f5f5f5 !important;}"][vc_column width="1/2" css=".vc_custom_1648468400351{margin-top: 50px !important;margin-bottom: 50px !important;}"][vc_column_text]
//content//
\[/vc_column_text\]\[/vc_column\]\[vc_column width="1/2" css=".vc_custom_1648468405860{margin-top: 50px !important;margin-bottom: 50px !important;}"\]\[vc_single_image image="3347" img_size="full" alignment="center"\]\[/vc_column\]\[/vc_row\]\[/vc_section\]</p>
';
}
return $content;
Can someone tell me what i am doing wrong?
Related
My idea is - which that we can always change theme in the spreadsheet, and the HTML sidebar style also change after re-open the sidebar depends on spreadsheet theme
First - I get color and font style from my spreadsheet theme. I might get the incorrect value, but this the idea I've come so far
function getFont() {
return SpreadsheetApp.getActiveSpreadsheet().getSpreadsheetTheme().getFontFamily()
}
function getBG() {
return SpreadsheetApp.getActiveSpreadsheet().getSpreadsheetTheme().getThemeColors()[0].BACKGROUND
}
function getTextColor() {
return SpreadsheetApp.getActiveSpreadsheet().getSpreadsheetTheme().getThemeColors()[0].TEXT
}
Then I want to paste those color and font style on HTML to change the style. I'm very new for HTML so I've come with this
<style>
body {
background-color: <?= getBG() ?>;
font: <?= getFont() ?>;
color: <?= getTextColor() ?>;
}
</style>
or any better solutions to do this I would like to hear more
Thank you in advance
To get accurate color, get hex color string by using getConcreteColor():
SpreadsheetApp
.getActive()
.getSpreadsheetTheme()
.getConcreteColor(
SpreadsheetApp.ThemeColorType.TEXT
)
.asRgbColor()
.asHexString()
The documentation for font states
If font is specified as a shorthand for several font-related properties, then:
it must include values for:
font-size
font-family
font : 1em <?= getFont() ?>;
Alternatively, you can just use font-family.
I have HTML code the loads a grid of images. The images have a box-shadow around them. Each image is loaded one by one on the grid, but they are all using the same style sheet. I want to make each box-shadow a different colour for the images. Is this possible?
I tried to test this a simple way by making each alternate image's shadow a different colour, but it only uses the last image's colour that is loaded for all of the images. Here is how I tested it:
//i is defined outside this
if($i == 0){
//I am using PHP to print out the HTML
Echo "<style> ul.rig li { box-shadow: 0 0 10px #2de61c; }</style>";
$i++;
}else if($i == 1){
Echo "<style> ul.rig li { box-shadow: 0 0 10px #ed1515; }</style>";
$i--;
}
Whatever i equals for the last loaded image, the rest of the image's shadows will have that colour. Is it possible to alternate/have different colours like this?
Just use nth-child CSS.
ul.rig li:nth-child(odd) { box-shadow: 0 0 10px #2de61c; }
ul.rig li:nth-child(even) { box-shadow: 0 0 10px #ed1515; }
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
Why not use something like:
//i is defined outside this
if($i == 0){
//I am using PHP to print out the HTML
Echo "<htmlselector class="1"></htmlselector>";
$i++;
}else if($i == 1){
Echo "<htmlselector class="1x"</htmlselector>";
$i--;
}
This way you can use CSS and style them accordingly.
You could load images into that grid together with a certain class. Then give each of those classes a preferred style. Because what you do now is just overriding css.
I have part of a code where it displays a Multi Select box and displays the options depending on the if statement:
$moduleSELECT = '<select name="moduletextarea" id="moduleselect" size="10">'.PHP_EOL;
if($modulenum == 0){
$moduleSELECT .= "<option disabled='disabled' value=''>No Modules currently on this Course</option>";
}else{
while ( $currentmodstmt->fetch() ) {
$moduleSELECT .= sprintf("<option disabled='disabled' value='%s'>%s - %s</option>", $dbModuleId, $dbModuleNo, $dbModuleName) . PHP_EOL;
}
}
$moduleSELECT .= '</select>';
Now from doing some research on the internet I think it is bad practice to include tags inside option tags. So my question is that if the if statement is true where number of records in 0, how can I display the text for "<option disabled='disabled' value=''>No Modules currently on this Course</option>"; in red colour and if the else statement is met how can I display these options sprintf("<option disabled='disabled' value='%s'>%s - %s</option>", $dbModuleId, $dbModuleNo, $dbModuleName) . PHP_EOL; in black colour text?
Thanks
just set a css style to the select (if there are no options), in this case color: red;
you can also have different colors for the options as well, just set different colors on each option. example fiddle here: http://jsfiddle.net/kennypu/CP8Xf/1/
I don't believe you can style individual <option> tags with CSS, but you could style the entire <select> as #kennypu points out.
Another way to achieve the results you want with a better/more intuative UI might be to only output the <select> tag when you actually have data to put inside it. When $modulenum == 0 maybe you should just output some different HTML that you can style properly.
HTML
<div class='no-data'>No Modules currently on this Course</div>
CSS
.no-data{
background-color: #CCC;
color: red;
padding: 5px;
}
i want to remove the link from my header using CSS so that only the text "my inner yoga" shows, but it is not a hyperlink. i tried to do
#post-28 .site-title.a {display:none;}
but it didnt work. i know it has to do with the site-title because i don't know how to say in CSS that i want to only have the "a" tag not working, but only in the site-title div.
also, is it possible to remove the "learn more" text from the right side of my header? i don't know PHP so that part is confusing to me. i dont know if its possible to do with css.
the link is: http://myinneryoga.com/strange-exotic-fruit-supplement/
Can't be done with CSS, but you can just display the site title itself using
<?php echo $bloginfo('name'); ?>
If you only want it removed on one page, use a conditional IF statement to query the page ID or slug and set a version without the site URL attached and an ELSE to set a version with the URL.
To remove the learn more text, add this code to the end of your functions.php file:
function improved_trim_excerpt($text) { // Fakes an excerpt if needed
global $post;
if ( '' == $text ) {
$text = get_the_content('');
$text = apply_filters('the_content', $text);
$text = str_replace(']]>', ']]>', $text);
$text = strip_tags($text, '<p>');
$excerpt_length = 100;
$words = explode(' ', $text, $excerpt_length + 1);
if (count($words)> $excerpt_length) {
array_pop($words);
array_push($words, '');
$text = implode(' ', $words);
}
}
return $text;
}
remove_filter('get_the_excerpt', 'wp_trim_excerpt');
add_filter('get_the_excerpt', 'improved_trim_excerpt');
If I'm correct the theme developer added a custom excerpt ending. Either that or it's just a hardcoded link, in which case go into the header file and use the find function of whatever editor you are using and search for the "learn more" text, then just remove it and the tag around it.
Not sure how you're generating "Learn Now", but if it's just a link you should be able to do something like the following (let's say the post ID is 17).
<?php if (!is_single(17)) { ?>
Learn More
<?php } ?>
Like Corey said above, use <?php echo $bloginfo('name'); ?> to show the name. Remove any <a> tag that might be surrounding it.
Try this..
Modify style.css line 482
#site-title a {
color: #FFFFFF;
cursor: default;
pointer-events: none;
}
I have a div that is colored dynamically and inside that div there is a text. I would like the color of the text will be white or black depending of the darkness of the color of the div.
So if for example the color of the div is dark brown I would like the color of the text be white. If the color of the div is yellow, I would like the color of the text be black.
How to do that with HTML/CSS/PHP?
Javier
How are you setting the colour of the Div? An extension of what Doug said...
var myDiv = document.getElementById("yourDynamicDiv");
myDiv.style.color = "black";
if you set the colour manually add that at the same time.
Rick
This function will take any hexcolor and return either white or black depending on what has more contrast.
function TextContrast($hexcolor){
$hexcolor = str_replace("#","","$hexcolor");
if(!$hexcolor){
$hexcolor = "FFFFFF";
}
$r = hexdec(substr($hexcolor,0,2));
$g = hexdec(substr($hexcolor,2,2));
$b = hexdec(substr($hexcolor,4,2));
$yiq = (($r*299)+($g*587)+($b*114))/1000;
if($yiq >= 128){
$text_color = "#000000";
}
else{
$text_color = "#FFFFFF";
}
} // end text contrast function
For your style sheet, you can change the .css extension to .php and add
.custom_div {background: #FF00FF;}
<?php TextContrast("FF00FF"); ?>
.custom_div {color: <?php echo $text_color; ?>
Ok so, will the colors be pre-determined, or the user will generate it? If you're going with the predetermined colors, you can set classes for the parent and the child can now where it is via css and adjust accordingly. Below is an example on how.
HTML
<div class="parent">
<div class="child"> Enter Content Here</div>
</div>
CSS
.black-bg {
background:#000000;
}
.black-bg div {
color:#FFFFFF;
}
.white-bg {
background:#FFFFFF;
}
.white-bg div {
color:#000000;
}
Everytime you change the class on the parent, it will force the browser to re-render the area, hence enabling dynamic styling.
I don't know php, but you can do it in JS like this:
JS (jquery)
if ( x === condition-1 ) {
$(".parent").addClass(".black-bg");
} else if ( x === condition-2 ) {
$(".parent").addClass(".white-bg");
}