I created an options page. My options page contains some fields for inputting text, uploading images, and for uploading Google Adsense Ads for my theme. But now I'm adding a color picker for choosing a custom color for my background header. This is my code; it is responsible for the header background color.
$YPE_options = get_option( 'YPE_header_option_name' );
$YPE_options['YPE_header_bg'];
and this is my header HTML Markup Code
<header id="single-header" class="jumbotron">
<div class="container text-center">
<a href="<?php echo home_url(); ?>">
<img class="img-responsive" src="<?php bloginfo('template_url'); ?>/img/logo.png" alt="<?php bloginfo('name'); ?>" />
</a>
<div>
<?php get_search_form(); ?>
</div>
</div>
I added some properties to jumbotron class in my style.css file below
.jumbotron {
margin-bottom: 0;
background: url('../img/slideshow-img/slide1.jpg') top no-repeat;
padding: 24px 30px;
-webkit-box-shadow: 0 5px 6px -6px #777;
-moz-box-shadow: 0 5px 6px -6px #777;
box-shadow: 0 5px 6px -6px #777;
}
I added url('../img/slideshow-img/slide1.jpg') top no-repeat property as background image for my header.
I want say if isset($YPE_options['YPE_header_bg']) show my color instead of my image else show me the image as background
How can I do this?
If you are using wp_head() action, and you should, you can do like this...
In your functions.php
add_action( 'wp_head', 'custom_css' );
function custom_css() {
$YPE_options = get_option( 'YPE_header_option_name' );
if( isset( $YPE_options['YPE_header_bg'] ) ) {
printf(
'<style type="text/css"> .jumbotron { background: %s; }</style>',
$YPE_options['YPE_header_bg']
);
}
}
It'll override your style.css
PS: I didn't test the code, but I think it's all ok and it should work.
Update:
Forgot to close isset() ( Already closed now )
if i read your question right.
one option, two steps:
step one) change class of A element based on isset($YPE_options['YPE_header_bg'])
this allows you to set a background color.
step two) show the image only if NOT isset($YPE_options['YPE_header_bg'])
oops: you have a background image in css for jumbotron (so it looks from your mark up). so you may want to change that class as well, to display background image based on your isset($YPE_options['YPE_header_bg'])
Related
I have a theme for my project. From the diagram, I want to change the color of Download to red, but the parent callout-info overrides it.
and the css of the theme
.callout code,
.callout .highlight {
background-color: #fff;
}
.callout.callout-danger {
border-color: #c23321;
}
.callout.callout-warning {
border-color: #c87f0a;
}
.callout.callout-info {
border-color: #0097bc;
}
.callout.callout-success {
border-color: #00733e;
}
and my view
<div class="row">
<div class="col-sm-12 col-xs-12">
<div class="callout callout-info">
<h4><?php echo Yii::t('app', 'You must have to follow the following instruction at the time of importing data'); ?></h4>
<ol>
<li><b><?php echo Yii::t('app', 'The field with red color are the required field cannot be blank.'); ?></b></li>
<li><?php echo Yii::t('app', 'The file must be CSV format.'); ?></li>
</ol>
<h5><?php echo Yii::t('app', 'Download the sample format of Excel sheet.'); ?> <b><?= Html::a(Yii::t('app', 'Download'), ['download-file', 'id' => 'SSF']) ?></b></h5>
</div><!--./callout-->
</div><!--./col-->
</div><!--./row-->
I have extracted my concern out here, from the css above
So, how do I make Download to be red in color without the parent
border-color
callout-info overriding the color
What exactly do you mean by saying without the parent callout-info overriding the color? If I misunderstood, please correct me.
Your given style doesn't work on a link since there is no a tag in there (you can confirm this by temporarily removing your <style>). You can override color in at least 2 ways:
-- Inserting in <style> new rule:
.callout.callout-info a {
color: #ff0000;
}
-- Inserting third parameter in Html::a:
Html::a(Yii::t('app', 'Download'), ['download-file', 'id' => 'SSF'], ['style' => 'color: #ff0000']);
P.S. I also see you added css3 tag, so this one will work too (assuming you have a compiler):
.callout.callout-info {
border-color: #c87f0a;
& a {
color: #ff0000;
}
}
I'm getting link address from db and it's showing on a div box with html h3 tag which class name is .images. This css class images width is 210px. But unfortunately this link address is going to outside the box.. It's should be within the box. Could you tell me what is the wrong in my css code ?
Css code:
.images{
max-width:210px;
float:left;
position:relative;
margin:15px 30px 15px 0;
border:0px #000 solid;
}
.images h3 a{width:210px !important; height:auto;}
.images img{
margin:0;
padding:5px;
border:1px #ccc solid;
}
pho code:
while($res = mysql_fetch_array($iamges)){
echo "<div class='images'>";
$image = $res['image'];
$directory = "galary_images/";
$link = inputvalid($res['link']);
echo "<h3><a href='$link' target='_new'>$link</a></h3>";
if(empty($link))
{
echo "<img src='$directory/$image'>";
}
else
{
echo "<a href='$link' target='_new'><img src='$directory/$image'></a>";
}
echo "</div>";
}
Since the link has no spaces in between, they cannot be broken into seperate lines. you can use code like this :
$link = "long link";
<a href = "long link">echo (strlen()<=10)?$link:substr($link, 0 ,7)."...";
</a>
Say link is http://stackoverflow.com/questions/20198005/text-is-going-to-outside-of-box-css-issue,
it will display something like this : http://stackoverflow.com on the name of the link but will send you to the same place.
Have you tried setting an
overflow:hidden
in your css for .images?
Just having a couple of css issues which havn't been able to figure out so I left it back to the default css.
Below is the application showing image sliders: Application
My question is how to get the Prev and Next links to be displayed on either side of the image outside the image slider rather than in the slider as it is overlapping over the images?
My other question is below the sliders it contains the slider numbers 1 2 3 so we know which image is first second and third in sliders and select them. My question is how to separate the numbers so they are not too close together?
Below is CSS for Prev and Next links:
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ul.bjqs-controls.v-centered li a{position:absolute;}
ul.bjqs-controls.v-centered li.bjqs-next a{right:0;}
ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;}
Below is css for the numbers bottom of images:
ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;}
ol.bjqs-markers.h-centered{text-align: center;}
ol.bjqs-markers li{display:inline;}
ol.bjqs-markers li a{display:inline-block;}
HTML and jquery:
<div id="banner-image_<?php echo $key; ?>">
<ul class="bjqs">
<?php foreach ($arrImageFile[$key] as $i) { ?>
<li><img alt="<?php echo $i; ?>" height="200" width="200" src="<?php echo 'ImageFiles/'.$i; ?>"></li>
<?php } ?>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#banner-image_<?php echo $key; ?>').bjqs({
animtype : 'slide',
height : 200,
width : 200,
responsive : true,
randomstart : false,
automatic : false
});
});
</script>
The answer to the second part of the question is to add padding to
ol.bjqs-markers li{display:inline;}
As shown here: http://jsfiddle.net/uYXkA/
I will answer the first part after the OP posts the HTML.
EDIT:
All right, it looks like jquery creates it's own css for your prev and next. We can get around this- just add this to your css:
ul.bjqs-controls.v-centered li.bjqs-prev a {
left: -40px;
}
And:
ul.bjqs-controls.v-centered li.bjqs-next a {
right: -40px;
}
Next you will likely want to shift the images as a whole. To do this just change the css for div.lt-container. If you add
margin: 0 auto;
width: 50%;
it will become centered.
It won't look very pretty, but it will work.
How can I create a full-width dashboard widget in WordPress?
I want to create a widget like the new one "welcome" in WordPress 3.3.
That plugin is in dashboard.php in wp_welcome_panel() but I don't know how they show it full-width.
They create a div "welcome-panel" outside the main div where all the widgets go, "dashboard-widgets-wrap":
<div id="welcome-panel" class="welcome-panel"></div>
<div id="dashboard-widgets-wrap">
<div id="dashboard-widgets" class="metabox-holder">
<div id="postbox-container-1" class="postbox-container" style="width:50%;">
<div id="postbox-container-2" class="postbox-container" style="width:50%;">
<div id="postbox-container-3" class="postbox-container" style="display:none;width:50%;">
<div id="postbox-container-4" class="postbox-container" style="display:none;width:50%;">
</div>
How can I achieve that?
Edit
I've found in wp-admin/index.php in line 90 this:
<div class="wrap">
<?php screen_icon(); ?>
<h2><?php echo esc_html( $title ); ?></h2>
<?php wp_welcome_panel(); ?>
<div id="dashboard-widgets-wrap">
<?php wp_dashboard(); ?>
<div class="clear"></div>
</div><!-- dashboard-widgets-wrap -->
</div><!-- wrap -->
So they do it inserting directly the code.
The only solution I see is maybe using jQuery?
Any other option?
A full-width widget can be very useful for adding content at the top of your own themes with updates or corroborative info or anything.
Starting with WordPress 3.5.0, you can directly modify the welcome panel:
First remove the existing content, then add your own function to render the content:
remove_action( 'welcome_panel', 'wp_welcome_panel' );
add_action( 'welcome_panel', 'my_custom_content' );
function my_custom_content()
{
?>
<h1>Hello!</h1>
<?php
}
I was able to achieve this goal by modifying the admin css as below:
add_action('admin_head', 'panfor_admin_custom_styles');
function panfor_admin_custom_styles() {
$output_css = '<style type="text/css">
#media only screen and (min-width: 800px) and (max-width: 1499px) {
#dashboard-widgets #postbox-container-1 { width: 100% !important; }
#dashboard-widgets #postbox-container-2 { width: 50% !important; }
#dashboard-widgets #postbox-container-3 { width: 50% !important; }
}
#media only screen and (min-width: 1500px) and (max-width: 1800px) {
#dashboard-widgets #postbox-container-1 { width: 100% !important; }
#dashboard-widgets #postbox-container-2 { width: 50% !important; }
#dashboard-widgets #postbox-container-3 { width: 50% !important; }
}
</style>';
echo $output_css;
}
The above code enforces full width for all widgets in the first column of Dashboard for certain screen widths. The second and third columns are displayed below first colum.
This is what it looks like in my Dashboard
So it is not the widget as such that determines its width, but the css styles.
There is still a small problem in my CSS that I cannot solve. Namely, the second and third columns switch places, depending on the width of the window.
Unfortunately, there's no way to hook into that Welcome panel.
I've got two solutions for this.
Manipulating the div with CSS and jQuery
or
Injecting an iframe
In this case, I'm cleaning all the dashboard widgets, tabs, welcome panel. Forcing a one-column layout. And finally filling the void with the iframe.
But this can be easily adapted to suit your taste.
Right now, I'm placing the following code in header.php.
I think that solution isn't very elegant.
How add this CSS code from functions.php to my header (how would that code look like)?
wp_head();
?>
<style>
.jimgMenu ul li.landscapes a {
background: url(<?php bloginfo('template_directory'); ?>/images/<?php echo get_option(THEME_PREFIX . 'intro_image'); ?>) repeat scroll 0%;
}
.jimgMenu ul li.people a {
background: url(<?php bloginfo('template_directory'); ?>/images/<?php echo get_option(THEME_PREFIX . 'slider_image'); ?>) repeat scroll 0%;
}
.jimgMenu ul li.nature a {
background: url(<?php bloginfo('template_directory'); ?>/images/nature.jpg) repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
background: url(<?php bloginfo('template_directory'); ?>/images/abstract.jpg) repeat scroll 0%;
}
.jimgMenu ul li.urban a {
background: url(<?php bloginfo('template_directory'); ?>/images/urban.jpg) repeat scroll 0%;
}
.jimgMenu ul li.people2 a {
background: url(<?php bloginfo('template_directory'); ?>/images/people.jpg) repeat scroll 0%;
min-width:310px;
}
</style>
Using hooks is the best way - then you only have to modify functions.php and not the template, making it easier to update the template should the author release changes, updates or patches.
functions.php
<?php
function add_styles()
{
?>
<style type="text/css">
.jimgMenu ul li.landscapes a {
background: url(<?php bloginfo('template_directory'); ?>/images/<?php echo get_option(THEME_PREFIX . 'intro_image'); ?>) repeat scroll 0%;
}
.jimgMenu ul li.people a {
background: url(<?php bloginfo('template_directory'); ?>/images/<?php echo get_option(THEME_PREFIX . 'slider_image'); ?>) repeat scroll 0%;
}
.jimgMenu ul li.nature a {
background: url(<?php bloginfo('template_directory'); ?>/images/nature.jpg) repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
background: url(<?php bloginfo('template_directory'); ?>/images/abstract.jpg) repeat scroll 0%;
}
.jimgMenu ul li.urban a {
background: url(<?php bloginfo('template_directory'); ?>/images/urban.jpg) repeat scroll 0%;
}
.jimgMenu ul li.people2 a {
background: url(<?php bloginfo('template_directory'); ?>/images/people.jpg) repeat scroll 0%;
min-width:310px;
}
</style>
<?php
}
add_action('wp_head', 'add_styles');
assuming your theme is built correctly and had wp_head(); in the <head>, which in your example it does, you won't need to mod any files besides functions.php
I will add that for site load optimization and performance enhancement because of client side caching of external style sheets you should make a separate style sheet then instead of the function I mentioned above printing out the CSS it would print out the <link> to the styles sheet.
While you can accomplish not using <?php bloginfo('template_directory'); ?> and instead use relative urls (ie. ../images/.....) that would still pose a problem with the get_option(THEME_PREFIX . 'intro_image') so if your style sheet changes are really this small what I listed above using the hook is an okay solution, if the styles you want to inject into the <head> are longer/larger than you listed in the question I would suggest using #erenon's suggestion about a dynamic style sheet and a what I just mentioned about modifying my function & hook to include the style sheet instead of printing the styles.
You can easily wrap the CSS in a function
function headerCSS(){
?>
// YOUR CSS
<?php
}
And then call the function
<HEAD>
<?php headerCSS(); ?>
//other header stuff here
<?HEAD>
<BODY>
You can't call it, but you can insert it as css:
<link href="generate-css.php" type="text/css" rel="stylesheet" />
#janoChen: Assuming your directory structure should look like this
/wp-content/
/themes/
/your_theme/
/images/
put all those styles without <?php bloginfo('template_directory'); ?> in a styles.css file within /wp-content/themes/your_theme/ and then in your header.php simply have
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styles.css" media="screen" type="text/css" />
This is a bad solution. External stylesheets are cached by the server. The method you're using means they must be served up in every page, and are more resource-intensive on the server side.
Look at using the tag to set the site resource path instead.
The base tag is very useful for Web
designers who build websites in one
location but will ultimately be placed
in another location.
See: http://webdesign.about.com/od/htmltags/qt/how-to-use-html-base-tag.htm