I created a nav bar and was wondering how I could edit the CSS of it on wordpress and by that I mean calling the nav bars by it's name( from php to css I suppose).
As it's just two dots showing variables.
This is what I have as nav bar.(It works even though there are no variables there).
function register_my_menu(){
register_nav_menu('header-menu',__( 'Test' ));
}
add_action( 'init', 'register_my_menu');
I have no idea how I should edit this in the style.css as I am new to wordpress but have common knowledge on php/css yet this keeps me questioning all the time.
<html>
<body>
<ul>
<li>1</li>
<li>2</li>
</ul>
<ul>
<li>10</li>
<li>20</li>
</ul>
<style>
body ul:first-child {
background: red;
}
</style>
</body>
</html>
Related
I have a blog page that includes an archive.
To display the archive I have used:
<div class="archive-title">
<?php the_archive_title( '<h1 class="page-title">', '</h1>' );?>
</div>
I have created a sidebar with
<div id="sidebar">
<ul>
<?php
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('blog-sidebar') ) :
endif; ?>
</ul>
</div>
..and added widgets to display the categories and archive links in the sidebar.
The issue is that on the archive posts page the main background of the posts is white and the sidebar is a dark blue.
I need the colour of the link on the sidebar to be white, but now it just shows an empty bulleted list (because the text is white) above the posts.
I can not change the colour of the .archive-title li a on the main page without changing it on the sidebar as well. I also can not hide it without hiding it on the sidebar.
You can see the issue here:
http://lumency.co/2019/03/
You will notice blank bullet points with no text above the posts.
How do I change the colour above the posts without affecting the colour on the sidebar as well?
Please let me know if you need any other info. Thanks!
It might be helpfull to mention that you are using WordPress...
Do you have access to change css? My advice would then be to add a class to the list under the title .mainlist and use css like this
.mainlist li a { /* change the style of the list under the title*/
color: black;
}
.sidebar li a { /* change the style of the s*/
color: white;
}
note: you are putting li tags into a div tag and it's a mistake. because li tags most only be child of a ul tag.
and for change .archive-title li a colors use below code.
.archive-title > li > a { color: #666666; }
Thanks for all the suggestions!
I added an in my sidebar which helped me style it.
I also removed the from my archive page, which was what was actually causing all the issues because I had no idea why it was adding a list there making me unable to style it. Haha, ooops!
I'm really new to coding and I'm getting stuck on a blank lines issue. I've spent two days researching articles on blank lines, white space, etc., and I'm not finding anything that addresses this particular problem.
I have PHP code that is grabbing the contents of a file in my directory. I output these variables on an HTML page and I have these items scrolling vertically. Basically, it's a vertical news ticker. But I'm encountering irregular results. In IE11 everything works perfectly. However, in IE9 (where the end users will be viewing the page), the combination of lists with echoed PHP variables creates extra lines between each "li". So, instead of 5 "articles", I have 9.
Normally I wouldn't care about extra spaces, but the news ticker is treating the extra lines like a "news" item and will pause for the user to read that blank line. This seems to have something to do with calling php variables via a "ul", but I cannot find anything to remove these extra lines. Has anyone encountered this? Or do you have an idea of what I can do to resolve?
<div id="content" class="block" style="float:left; position:relative; left:135px;">
<ul id="ticker">
<li><?php echo $par1;?></li>
<li><?php echo $par2;?></li>
<li><?php echo $par3;?></li>
<li><?php echo $par4;?></li>
<li><?php echo $par5;?></li>
</ul>
Code from Source View:
<!DOCTYPE html>
<html>
<head>
<style>
ul#ticker{
width:700px;
height:200px;
}
ul#ticker li{
font-family:Verdana;
font-weight:bold;
font-size:14px;
text-align:center;
width:700px;
height:200px;
margin:0px;
padding:0px;
border:0px;
display:block;
overflow:hidden;
}
</style>
</head>
<body>
<span style="float:left; left:10px; position:absolute; width:125px; text-align:right;"><b>Current Events:</b></span>
<div id="content" class="block" style="float:left; position:relative; left:135px;">
<ul id="ticker">
<li><a href = "http://rss.cnn.com/~r/rss/money_latest/~3/VfqbYKimwZE/index.html" target="_blank">Bulgaria tries to contain bank run</li>
<li><a href = "http://rss.cnn.com/~r/rss/money_latest/~3/EqRCj13Dabw/index.html" target="_blank">GM offers victims more than $1 million</li>
<li><a href = "http://rss.cnn.com/~r/rss/money_latest/~3/g_ws27zfMkg/index.html" target="_blank">Stock market flirts with new records</li>
<li><a href = "http://rss.cnn.com/~r/rss/money_latest/~3/iIm8fzJ9rWM/index.html" target="_blank">Enough with Millennials. Here's what Gen X thinks</li>
<li><a href = "http://rss.cnn.com/~r/rss/money_latest/~3/x1GNhn8SwnM/index.html" target="_blank">Consumer Reports rates some Graco strollers "don't buy"</li>
</ul>
</div>
</body>
</html>
It is pretty hard to say from your description. I would suggest perhaps loading the page in IE9, then viewing the source (and posting it here if you don't see the issue).
Also,
in IE9 (where the end users will be viewing the page)
Are you for real?
http://codepad.viper-7.com/lw0VuN
here is a fiddle,showing it works. most probably one of your $par variables is not defined. best way to avoid this is to make an array and use a foreach http://www.php.net/manual/en/control-structures.foreach.php , or to check if it is defined like so:
<?php if($par1) echo "<li>".$par1."</li>"; ?>
and so on. Hope this helps!
I pulled up the developer tools in IE and found that, for some reason, the code as I had it written was creating a secondary list element for each news item. However, that list element contained only the "a" tag portion of my PHP variable so it wasn't truly blank, although it obviously appeared that way.
I'm not sure why this occurred, but I changed the "ul" to a div tag and the "li" to a p tag and now it's working the way I want it to. The only question that still leaves me with is why IE11 overlooked the list items that contained only the "a" tags, but IE 9 didn't. However, that's not a problem I need to answer today. Thank you all for your help!
I am making a music website. i have installed a audio player in a div just above the footer. but the problem is that whenever i moved to the next page, song stops playing. How can i overcome this situation. I am working on this from a long time but haven't succeeded yet.
Someone has suggested me working though i frames but the other one said its not a good option.
What shall i do?
This is something really important for me.
I would be really helpful if someone tell me the quick solution for it.
thanks
shail
Solution One: Use AJAX
The Javascript library jQuery facilitates asynchronous requests to your content.
For instance, after including the necessary .js files, you can use:
$("#SampleLink").click(function() {
$.ajax({
url : 'TargetPage.php',
success: function(data){
$('#MainBodyContentDIV').html(data);
}
});
});
to load the target page's HTML into the DIV with ID MainBodyContentDIV when a link with ID SampleLink is clicked.
This solution requires you to use Javascript and jQuery, and so comes with all the cons (and pros!) of using them.
I suggest you to do some reading (if you haven't already) on these before making any serious changes to your site.
For example, you will have to enclose the code above within a function and run it via onClick events, either through jQuery entirely, or through the HTML attribute (which is also named onClick).
This solution will cut down the page refreshes that interrupt your music.
Solution Two: Use an iFrame Anyway
If appropriately styled, this won't be a visual issue.
Here's a link to a question about the use of iFrames.
I might be wrong, but I believe that the simplest way for you to work around this problem is to use an iFrame.
You asked so you shall receive. By the way, this is by no means efficient or secure. It is just meant to help you by being a reference. I included a YouTube video to replicate the music player.
Credit is do where do, Thanks Thauwa!
Main.php
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family:arial;
margin:0px;
}
ul{
margin:0px;
}
a{
text-decoration:underline;
cursor:pointer;
}
h3{
margin:0px;
float:left;
}
#category{
width:980px;
margin:0px auto;
background-color:#eee;
padding:30px 0px;
}
#songs{
width:980px;
margin:0px auto;
background-color:#eee;
padding:30px 0px;
}
#musicplayer{
width:980px;
margin:0px auto;
background-color:#ccc;
text-align:center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function cate(page){
$.ajax({
url : page,
success: function(data){
$('#songs').html(data);
}
});
}
</script>
</head>
<body>
<div id="category">
<h1>Categories</h1>
<ul>
<li><a onclick="cate('cat1.php')">Category 1</a></li>
<li><a onclick="cate('cat2.php')">Category 2</a></li>
<li><a onclick="cate('cat3.php')">Category 3</a></li>
</ul>
</div>
<div id="songs"></div>
<div id="musicplayer">
<h3>Music Player</h3>
<iframe width="560" height="315" src="//www.youtube.com/embed/uiUAq4aVTjY" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
cat1.php
<h2>Songs</h2>
<ol>
<li>Category 1 - Song 1</li>
<li>Category 1 - Song 2</li>
</ol>
cat2.php
<h2>Songs</h2>
<ol>
<li>Category 2 - Song 1</li>
<li>Category 2 - Song 2</li>
</ol>
cat3.php
<h2>Songs</h2>
<ol>
<li>Category 3 - Song 1</li>
<li>Category 3 - Song 2</li>
</ol>
<ul id="verticalmenu">
<li>Home</li>
<li>Vertical Menu</li>
<li>Drop Down Menu</li>
<li>Fading Banner</li>
<li>Web Design Blog</li>
</ul>
If this is my menu.php, how can I call it on other pages? I want it to be static or say fixed.
It should be present in every page, I navigate to.
http://oi57.tinypic.com/2j0nq5i.jpg
How can I do so, just like the red block in the img??
I would suggest making a header.php file that contains the full header of your site, including the menu. Once you have done that, you can just call include("header.php"); on every page and your entire header will be brought in. This will also allow you to make one change in one file and affect the entire site.
To position the menu on the left or right, you are going to want to wrap the menu with a css call similar to float: left; or float: right; jsfiddlee: http://jsfiddle.net/jjS98/
here is the css code for floating your menu to the right:
#verticalmenu{
float:right;
}
You can change right to left for the desired results.
I built my theme into WordPress and all was good, then I wanted to add woocommerce to the theme to add a shop. The woocommerce was not showing its styles. So I did some research and found the reason was my <body> tag should of been <body <?php body_class(); ?>>.
This was not in the guide I followed to convert the html.
So I added the tag in and the woocommerce styling appears fine. BUT the whole site has pushed left.
Here is the site - www.theinurse.com could anyone let me know why? I have tried a few things in css but nothing has resolved it. If i edit the following css the site moves
html, body {
height: 100%;
margin: 0pt;
}
If I edit margin it moves, but if I set margin-left: auto; margin-right:auto; etc etc it does nothing. But if I do margin-left:100px; it moves the site right 100px.
Baffling me! If I remove the body_class tag it sits perfectly. Please help me.
Can you try to replace this:
<?php body_class(); ?>
by this:
<body <?php body_class(); ?>>
?
If you have declared
add_theme_support( 'woocommerce' );
the system expect you to have the WooCommerce styles integrated in your theme stylesheet. This is why it don't call for the default stylesheet.
You forgot the re-add the body class Frame. Your CSS code uses the Frame class to center the content.
<body <?php body_class('Frame'); ?>>
The Codex entry for body_class() states there is a parameter $class.
class (string or array) (optional)
One or more classes to add to the class attribute, separated by a single space.
Use this parameter to make WordPress include the extra body classes you've added yourself.