I'm a beginner of php, I found this custom style in Wordpress Redux framework but I don't understand how the code work.
I would like to know how this formula works:
<?php echo ($logo_h) ? (str_replace('px','',$logo_h) + 55) : 125; ?>px;
Can someone please explain. So much appreciated.
<?php
$logo_w=$sellegance_opt['logo_size']['width'];
$logo_h=$sellegance_opt['logo_size']['height'];
?>
#header .header_container {
height: <?php echo ($logo_h) ? (str_replace('px','',$logo_h) + 55) : 125; ?>px;
}
.header3 #header .header_container {
height: <?php echo ($logo_h) ? str_replace('px','',$logo_h) : 70; ?>px;
}
.header3 .desktop_nav {
left: <?php echo $logo_w; ?>;
margin-left: 10px;
}
.logo {
width: <?php echo ($logo_w) ? str_replace('px','',$logo_w) : 160; ?>px;
height: <?php echo ($logo_h) ? str_replace('px','',$logo_h) : 70; ?>px;
margin-left: -<?php echo ($logo_w) ? (str_replace('px','',$logo_w)/2) : 80; ?>px;
}
i haven't used that framework yet but looking at the code i can surely tell that this framework certainly offer you to set the height and width of the logo in your backend and gets those entered values as
$logo_w=$sellegance_opt['logo_size']['width'];
$logo_h=$sellegance_opt['logo_size']['height'];
and uses the $logo_w and $logo_h to create the design accordingly.
If you are planning to use just this part of the code from the framework without the framework then you can't. You must have the whole framework and set those values from the appropriate locations.
//add this in functions.php
function mytheme_custom_options(){
global $sellegance_opt;
$logo_w=$sellegance_opt['logo_size']['width'];
$logo_h=$sellegance_opt['logo_size']['height'];
<style>
/*use your style here */
</style>
}
add_action('wp_head','mytheme_custom_options');
Ok so I try to explain, but im not sooo good in explaining things :P
The PHP
The redux optionsname seems to be "sellegance_opt" see lines 12 & 13 in the sample-config.php shipped with redux.
logo_size seems to be a field with (at least) the values url, width and height.
the PHP string is dropped to the header.php just before the closing header tag I guess. So the variables are callable in a file.
THE CSS
the css styles the output of the php
He (or she) is calling the attribute and gets a result with the uploaded media sizes. He now do some math to get the image size needed to fit the template.
But without all the code, much of this is guessing.
All the best.
Related
I have been trying to find out how to add PHP from ACF to style some text in CSS. Using: https://www.advancedcustomfields.com/resources/color-picker/
.special-color {
background-color: <?php the_field('color'); ?>;
}
To echo php into workable CSS, you'll have to include the CSS in the php sections of the site (or something more advanced, probably using functions.php). This will work if you simply add:
<style>
.special-color {
background-color: <?php the_field('color'); ?>;
}
</style>
..to (say) your single.php file within the loop.
As an aside, I don't think this would be a viable way to alter site colours (if that's what you are trying to do?), but more as a way of (say) specifying a particular color for a title of one post.
Then you might think of including the style INLINE (pseudo code):
<h1 style="color: <?php the_field('color'); ?>">Post title</h1>
Simply I get the "advanced custom field" value (which is custom_color for an element) of the current post, and then change the element's color using JQuery.
So I created a new js file (custom_css.js) in the child theme with the following code:
jQuery(document).ready(function($) {
console.log(css.custom_color);
// add dynamic css to the elements
});
Then here is the code in functions.php file:
add_action('wp_enqueue_scripts', 'custom_css');
/* Get position details */
function custom_css() {
wp_enqueue_script('custom_css', get_stylesheet_directory_uri() . '/js/custom_css.js', array('jquery'));
wp_localize_script('custom_css', 'css', array(
'admin_url' => admin_url(),
'custom_color' => get_field('custom_color', get_queried_object_id() )
));
}
Is it possible to Remove sidebar in wordpress if screen size < 500px, else shows up.
I have this in single.php:
<?php get_sidebar('left'); ?>
And my sidebar-left.php is:
<div class="sidebar-left">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar1') ) : ?>
<?php endif; ?>
</div>
just use css media query:
#media (max-width:500px) {
.sidebar-left {
display: none;
}
}
There are two ways to do that:
Use css media queries:
#media (max-width: 500px) {
.sidebar-left {
display: none;
}
}
Use jQuery:
if ($(window).width() < 500) {
$( ".sidebar-left" ).remove();
}
It is not possible to prevent Wordpress (on server-side) to generate the sidebar html code, because Wordpress does not have information about the width of your browser window. You can read more about this 'Problem' here:
Getting the screen resolution using PHP
There is another possibility which I'm not 100% sure it does what you need, but you could remove it in general for mobile devices.
Wordpress has the function wp_is_mobile(), so you can create a condition to not call the sidebar if the user is coming from a mobile device - which usually have the smaller screens.
It should look something like this:
<?php
if (!wp_is_mobile() ) {
// if device is not mobile get sidebar
get_sidebar('left');
}
?>
Like that you would only show the sidebar when the user is not coming from a mobile device.
Here is the wordpress the function reference:
https://codex.wordpress.org/Function_Reference/wp_is_mobile
Edit:
Also be aware that if you change it in single.php you only change it for the view of a single post. Otherwise I think you would also need to edit page.php for page views and so on..
This would be particularly helpful when making a new "child stylesheet" which overwrites some parts of the "parent stylesheet".
For example, when making a RTL version of a WordPress theme, I would keep all horizontal positioning attributes and delete the rest.
Is there a way or a tool to achieve that?
I think the most viable solution would be to use php or the like to write in the css file directly. So in the css.php file:
<?php
header("Content-type: text/css; charset: UTF-8");
if($rtl){
$direction = "right";
}else{
$direction = "left";
}?>
.selector{
<?php echo $direction; ?>: 20px;
}
....
I'd like to add a video tutorial for registered users to my dashboard in wordpress. I tried this code:
`<style type="text/css">
.postbox,
.postbox div.handlediv,
.postbox h3.hndle {
background: none;
border: none;
}
</style>
<?php
/* add content */
function customContent() {
echo ' http://www.youtube.com/watch?v=rArpyMXT2ew ';
}
/* add widget */
function add_customDashboardWidget() {
wp_add_dashboard_widget('wp_dashboard_widget', 'Custom Content', 'customContent');
}
/* add action */
add_action('wp_dashboard_setup', 'add_customDashboardWidget' );
?>`
but it only shows the line, not the actual video. What to do?
If you don't feel like coding, and you want to be able to easily add more videos and adjust which roles can see them, I just released a plugin that does that super easily. It's lightweight and simple at the moment, but it definitely does the trick.
https://wordpress.org/plugins/video-dashboard/
I've noticed that on some product pages of my site (but not all) I'm getting a strange issue where one of the product images appears in the row below the one it's meant to.
So on some pages the 'People who bought this also purchased...' images, on the last line one of the products drops down a line and is obviously out of place.
http://tinyurl.com/cs6d3q5
but most other pages are fine!
http://tinyurl.com/clwq3dz
I can't figure out whats the problem. As far as I can see they should both act the same way. Can anyone enlighten me and also tell me how they debugged it? I use Firebug and developer tools on FF but they don't seem as useful as they once did
thanks
here's the code used to create it:
if($also_purchased_products->RecordCount() > 0) {
echo '<div style="clear:both"></div>';
echo '<div class="sideboxHeading">People who bought this also purchased...</div> <div class="ProdInfoDotSpacer"></div>';
while (!$also_purchased_products->EOF) {
$also_purchased_products->fields['products_name'] = zen_get_products_name($also_purchased_products->fields['products_id']);
echo '<div class="alsoPurchasedWrapper">';
echo '' . zen_image(DIR_WS_IMAGES . $also_purchased_products->fields['products_image'], $also_purchased_products->fields['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '<br />';
echo '' . $also_purchased_products->fields['products_name'] . '';
echo '</div>';
$also_purchased_products->MoveNext();
}
}
its because
Black/Sage Guinness harp knit
here Black/Sage Guinness harp knit scarf is long try sorting it
The problem appears when the previous item text link is more than one line long. You can truncate it, as NullPointer says, or set a height on .alsoPurchasedWrapper:
.alsoPurchasedWrapper {
float: left;
width: 150px;
margin: 5px 0px 10px 20px;
height: 170px;
}