I'm going mad trying to solve this problem.
So basically I've written a static HTML-CSS page in order to implement it in a Wordpress custom theme.
I've got three social buttons inside the footer, in the static theme they work fine (I'm using webpack with HtmlWebpackPlugin for local frontend development). They're three links inside list elements:
<ul class="li-h li-h-centered">
<li class="s-hover-facebook">
<a href="#">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="s-hover-instagram">
<a href="#">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="s-hover-twitter">
<a href="#">
<i class="fab fa-twitter"></i>
</a>
</li>
</ul>
The CSS that drives the whole thing is (SCSS actually, but you get the idea)
&__social {
padding: .5em 2em;
&>ul>li>a {
display: block;
}
&>ul>li {
display: inline-block;
border-radius: 50%;
margin: 0 .2em;
width: 2em;
height: 2em;
line-height: 2em;
background-color: #333;
}
font-size: 1.8em;
}
The result in the static website is:
The result in the Wordpress websate is this:
I really don't know what is going on here, any suggestions?
Related
I am trying to figure out how I can change the text color for a Blazor application via CSS setting.
As an experiment, I creating a new (default) Blazor WebAssembly application in Visual Studio 2019. Then I am trying to change the test color of the navigation elements on the left-hand side, but no matter which CSS file I am modifying I don't seem to get the correct effect.
The relevant Razor markup looks like this (in NavMenu.razor):
<li class="nav-item px-3">
<NavLink class="nav-link" href="fetchdata">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</li>
which renders in HTML like this:
<li class="nav-item px-3" b-qdt7h34qew="">
<!--!-->
<a href="fetchdata" class="nav-link">
<!--!-->
<span class="oi oi-list-rich" aria-hidden="true" b-qdt7h34qew=""></span> Fetch data
</a>
</li>
I have tried both
.nav-item { color: orange; }
and
.nav-link { color: orange; }
in either the NavMenu.razor.css or the css/app.css file but neither seems to work.
What is the correct way to set this css setting so the text 'Fetch data' appears as an orange text?
You can modify the styles in NavMenu.razor.css with ::deep option and since CSS isolation combines the application CSS, you clean the application and rebuild to check for your changes.
.nav-item ::deep a {
color: orange;
border-radius: 4px;
height: 3rem;
display: flex;
align-items: center;
line-height: 3rem;
}
Regards,
Sridhar N
You have to use ::deep
.nav-item ::deep a {
color: orange;
}
The existing value in NavMenu.razor.css
.nav-item ::deep a {
color: #d7d7d7;
border-radius: 4px;
height: 3rem;
display: flex;
align-items: center;
line-height: 3rem;
}
I would like to insert the following plane css code in my BEM structure. But for some reason the before psuedo class isnt appearing in the DOM tree.
Anyone know how to apply this CSS code into BEM?
CSS:
li + li:before {
height: 22px;
line-height: 22px;
.icon(#unicode: '\f105'; #iconset: 'FontAwesome');
font-size: 22px;
opacity: 0.2;
position: relative;
top: 2px;
padding: 0 15px;
}
HTML:
<li class="mod-breadcrumbContainer__item">
<a class="mod-breadcrumbContainer__link" href="#" title="text">
<span class="mod-breadcrumbContainer__text">link1</span>
</a>
</li>
<li class="mod-breadcrumbContainer__item">
<a class="mod-breadcrumbContainer__link" href="#" title="text">
<span class="mod-breadcrumbContainer__text">link2</span>
</a>
</li>
I have been asked to "fix" a client's old website which was written in 2011, by a design team that was clearly struggling to understand the then-new HTML5+CSS. There is a lot wrong with this code, and most of it I've been able to fix, stuff like using
<p> </p>
for line breaks. I'm not even kidding.
Anyway, one of the things I have been asked to do is extend the website's text container and menu, and stretch out the menu's actual text to fit the new width, which has gone fine. However, I'm having some trouble with padding out the menu text. I did a search through the forums for some advice, and tried out the style code suggested, but it seems to move the menu text out of the area of menu.jpg where it needs to be.
CSS (this is the client's, so yell at them)
#header_menu_container
/* This is verbatim from the code I am working with. I seriously have NO IDEA why this selector even exists. */
{
}
#header_menu
{
margin: 0;
display: inline-block;
list-style: none;
font-size: 15px;
}
/* header menu colour */
#header_menu li a {
color: #516a82;
}
/* menu hover colour */
#header_menu li a:hover{
color: #b55239;
text-decoration: none;
}
.no_submenu, .has_submenu
{
display: block;
float: left;
position: relative;
}
.no_submenu a, .has_submenu span{
display: block;
font-size: 15px;
font-family: "Times New Roman", Times, serif;
color: #516a82;
text-decoration: none;
}
.no_submenu a:hover, .has_submenu span:hover{
color: #b55239;
}
.has_submenu span{
cursor: pointer;
_cursor: hand;
}
.is_submenu{
position: absolute;
left: -10px;
top: 32px;
background: #dfd7c5;
margin: 0;
padding: 0;
list-style: none;
z-index: 9999;
}
.is_submenu li a{
display: block;
text-align: left;
padding-left: 10px;
width: 122px;
padding-right: 10px;
font-size: 15px;
font-family: "Times New Roman", Times, serif;
color: #516a82;
text-decoration: none;
pading-top: 10px;
padding-bottom: 10px;
line-height: 18px;
}
.is_submenu li a:hover{
color: #b55239;
}
HTML (based on client's, with a bit of my modification)
<ul id="header_menu">
<li class="no_submenu" style="width: 63px;">
<b>Home</b>
</li>
<li class="has_submenu" id="who-we-are">
<b><span style="width: 103px;">Who We Are</span></b>
<ul class="is_submenu" style="display: none;">
<li>
<b>Janyce Lastman</b>
</li>
<li>
<b>Ziny Kirshenbaum</b>
</li>
<li>
<b>Tutors</b>
</li>
</ul>
</li>
<li class="has_submenu" id="services"><span style="width: 73px;"><b>Services</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>Consultant To Schools</b>
</li>
<li>
<b>Education Consulting And Case Management</b>
</li>
<li>
<b>Educational Assessments</b>
</li>
<li>
<b>School Placement Consultation</b>
</li>
<li>
<b>Seminars And Workshops</b>
</li>
<li>
<b>Test Tips Support</b>
</li>
<li>
<b>Tutoring</b>
</li>
</ul>
</li>
<li class="has_submenu" id="media-and-press">
<span style="width: 113px;"><b>Media & Press</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>In the Press</b>
</li>
<li>
<b>Book Reviews</b>
</li>
<li>
<b>Selected Articles</b>
</li>
<li>
<b>Interesting Links</b>
</li>
</ul>
</li>
<li class="no_submenu" style="width: 53px;">
<b>FAQ</b>
</li>
<li class="has_submenu" id="testimonials"><span style="width: 103px;"><b>Testimonials</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>Testimonials for TTG Tutors</b>
</li>
<li>
<b>Testimonials for Janyce Lastman</b>
</li>
</ul>
</li>
<li class="has_submenu" id="contact-us">
<span style="width: 70px;"><b>Contact</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>Contact Info</b>
</li>
<li>
<b>Employment Opportunities</b>
</li>
</ul>
</li>
</ul>
</div>
There's a display call inside a class selector, which is likely part of the issue, but my gut feeling tells me that this needs someone with more expertise to dissect everything wrong with it.
It's one thing to figure out what's wrong with your own code, and another to try and analyze what's wrong with someone else's. Any advice would be greatly appreciated :)
So looking back over the code again, I think I've figured out the problem.
Instead of putting padding in the CSS, the original authors put a numerical width in a style tag in the HTML for every single menu, e.g.
<span style="width: 73px;"><b>Services</b></span>
Idiots.
I'm going to try and write something similar into the stylesheet properly.
Well I started an ASP.NET MVC5 project and I want to use bootstrap 4 alpha 4 instead of the default bootstrap 3. I'm having some problems with the navbars, as I am unable to change the text color, which looks very weird. The html code is shown below:
<nav class="navbar navbar-light navbar-fixed-top bg-primary">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsingNavbar" aria-controls="collapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<div id="collapsingNavbar" class="collapse navbar-toggleable-xs">
<a class="navbar-brand" href="/">Application Name</a>
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/Home/About">About</a></li>
<li class="nav-item"><a class="nav-link" href="/Home/Contact">Contact</a></li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item"><a class="nav-link" href="/Account/Register" id="registerLink">Register</a></li>
<li class="nav-item"><a class="nav-link" href="/Account/Login" id="loginLink">Log in</a></li>
</ul>
</div>
</nav>
However, this doesn't work very well as the text color shows up just like the navbar's color, which is very difficult to see. The screenshot below demonstrates how it looks from my firefox browser, in which the navlinks color are very similar to the navbar's background color:
I tried to change this color by defining a new css class with color:white, but it won't work. The only way I can get it to work is to add inline style in the <a> tag, but this isn't the ideal solution and will create maintenance problem in future.
Does anyone know how I can change the navlink text and hover colors? Thanks.
PS: Someone asked for the main css file for the site. It's just the main css generated by ASP.NET MVC with a simple addition of class nav-item-color, nothing special. Below is the content of it if you are interested:
body {
padding-top: 55px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
/* styles for validation helpers */
.field-validation-error {
color: #b94a48;
}
.field-validation-valid {
display: none;
}
input.input-validation-error {
border: 1px solid #b94a48;
}
input[type="checkbox"].input-validation-error {
border: 0 none;
}
.validation-summary-errors {
color: #b94a48;
}
.validation-summary-valid {
display: none;
}
.nav-link-color {
color: white;
}
I am using the Simple Side Nav: http://startbootstrap.com/template-overviews/simple-sidebar/
I want to attach a button next to side of this Nav, on the Right Side which I will be using to hide and show the Nav Bar.
I have created a JSFiddle: https://jsfiddle.net/4q08khy1/
This button is the position i want it to be, as you can see in the image:
But it is hiding behind the Content Part of the page, is there a way to fix this?
my Left Nav:
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
<span> << </span>
</div>
and Style on toggle
<style>
.toggle {
background: #1ABC9C;
color: #eee;
position: absolute;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
right: -50px;
top: 18px;
box-shadow: 5px 0 0 rgba(0,0,0,0.1);
z-index: 5000;
}
</style>
Try adding following CSS to your code:
a#menu-toggle {
margin: -25px 0 0 -36px;
}