I've added a set of border stylings to my media attachment page using Advanced Custom Fields. What I want is to be able to select one of these options and add the relevant style as a class to the attached image.
For example: a blogger can create a post and mix and match different stylings to the images without knowing any CSS or HTML. I've attached a screenshot of the attachment page.
I've been investigating this and it seems like it has to do with attachment_fields_to_edit or attachment_fields_to_save filters, but I can't put it all together.
http://imgur.com/XW42bLo
So ideally, if I were to select the Green Border option the image in the post would have a "green-border" class.
Apologies if I'm misunderstanding the question, but could you not just do:
<?php
$style = get_field('border_options');
?>
<div class="<?php echo $style . '-border'; ?>">
Content
</div>
?
Related
I used add_theme_option('custom-background') in my wordpress functions.php file. And it is working but when i set background image i have not got the image. In the page style it is showing [site_url] in the url. But i need to show localhost/wordpress instead of [site_url].The style line is given below:
background-image: url("http://[site_url]/wp-content/uploads/2019/02/pexels-photo-958168.jpeg");
I got an alternative solutions. The problem is with the theme. Other theme is working correctly. For this theme i did this:
<body <?php body_class();?> style="background-image: url('<?php echo substr(get_background_image(),11);?>')">
Now it is returning- "wp-content/uploads/2019/02/bg.jpeg". And i will get background image dynamically.
You probably mean add_theme_support(), not add_theme_option().
Don't know why it's happening, but a workaround would be to tweak #Emma's suggestion a bit. Something like
<?php $url = parse_url(get_background_image(), PHP_URL_PATH); ?>
<div
class="myClass"
style="background-image: url(<?php echo $url?>)">
</div>
(Probably also need to test if the initial image URL is empty or not.)
(And of course this assumes the WordPress install is at the site root. Some further changes might be needed otherwise, and it might end being more like Emma's. I might also add that you could instead use jquery on the client side the fix the problematic URL.)
I've a WP site with the Enfold-child theme. For the header, I choose to place the company logo upper left and main menu under the company logo. I would like to add an image on the right of the company logo but I don't try to do this.
Last part of header.php is the following
<?php
if(!$blank) //blank templates dont display header nor footer
{
//fetch the template file that holds the main menu, located in includes/helper-menu-main.php
get_template_part( 'includes/helper', 'main-menu' );
} ?>
<div id='main' class='all_colors' data-scroll-offset='<?php echo avia_header_setting('header_scroll_offset'); ?>'>
<?php
if(isset($avia_config['temp_logo_container'])) echo $avia_config['temp_logo_container'];
do_action('ava_after_main_container');
?>
Have I to modify this file to add the image? Can you help me, please?
Thanks!
try this. It's a Knowledgebase article from Enfold detailing how to add a Widget area to the header for adding custom code, ie an image.
It's what we use to do exactly that.
: http://www.kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/
if you do not want to touch the header.php you may consider using a css ::after selector
How can I achieve changing backgrounds in Yii2? I am new to Yii2.
Here is something similar: codepen.io
Do I need to do it via CSS or should i do it via any Extensions ?
In view file make html structure like in your link, next you need to load css and js code. You can do it in few ways, but most simple is add it in the same view file like below:
<?php $cssContent = 'put css content here';
$this->registerCss($cssContent);
$jsContent = 'put your javascript content here';
$this->registerJs($jsContent);
?>
<div id="change-bg-image"></div>
<div id="change-bg-color">
</div>
You can do it via javascript, just change wrapper or document.body style.
The variable is for example there:
document.body.style.backgroundImage
Happy coding.
(you can declare array of links to images and do setInterval, also you can despite of document.body use for example document.getElementById("background") )
I have a custom template that I am using in my website. To the right of my pages I have a position with a background color that I do not want to display on my terms of use page. The position contains a twitter module which I can remove from the page but I am still left with a small box containing the background color from the css. Can I completely remove this position from just the terms of use page.
In your Terms of use page, add a custom class say terms-of-use and then override it with background: transparent
The dynamic custom class can be generated through Adding custom class on Joomla pages
CSS
body.terms-of-use .social {
background: transparent;
}
Output:
You can edit the html template, look for the place where the module is shown in the index.php will be like this ...
<jdoc:include type="modules" name="social" style="none" />
And add some code in PHP, so that only the module is displayed, when the module is published. In this way joomla will not write anything if there is no content to show and will not need to do anything in the CSS, besides improving the loading of the page.
<?php if($this->countModules('social')) : ?>
<jdoc:include type="modules" name="social" style="none" />
<?php endif; ?>
Hey I have a wordpress blog, and I need to add some negative margin on the sidebar on the index page, but not on any other page, the trouble is since the sidebar is in "sidebar.php" and the head element is in "header.php" so I can't use inline styles or styles just for that page.
Any ways of achieving this?
I would assume a PHP if statement in the header?
For the moment I've used a style element within the body.
I haven't used wordpress in some time, but from what I remember, there was a specific home/index template... You could wrap the sidebar in a tag and sub-reference that through css.
css:
#sidebar-fix #sidebar element {...}
html:
<div id="sidebar-fix"><?#sidebar include?></div>
You can use the is_page function to single out the page you want. Here is an example and a link.
<?php if (is_page('My Page')) { ?>
<style type="text/css">Your style here</style>
<?php } ?>
http://codex.wordpress.org/Function_Reference/is_page