I'm trying to change the style blog navigation style on my blog from "Newer / Older" text to NEXT / PREVIOUS and also make it match the same color/font/style/hover of my RSS text at the top :Subscribe via RSS: So far I can't get anything to change.
.pagination .next-item { color: #0076a9 !important; font-size: 8em; font-weight: 700; }
.pagination .prev-item { color: #0076a9 !important; font-size: 8em; font-weight: 700; }
This is a pretty janky way to do it, but if you ONLY have control over the CSS, this should work for you:
.pagination
{
color: rgba(0,0,0,0)
}
.pagination a
{
font-family: "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 16px;
font-weight: 700;
}
.pagination a:first-child
{
position: relative;
left: 616px;
color: rgba(0,0,0,0);
}
.pagination a:first-child:after
{
position: absolute;
left: 0;
content: "Next";
color: #0076a9;
}
.pagination a + a,
.pagination a:only-child
{
position: relative;
left: auto;
margin-left: -59px;
color: rgba(0,0,0,0);
}
.pagination a + a:after,
.pagination a:only-child:after
{
position: absolute;
left: 0;
content: "Previous";
color: #0076a9;
}
Again, this is NOT the recommended solution, if you have control over HTML. What this does:
Hides the "/" from the Older/Newer
Sets the link font styles.
If there is a link in the .pagination div that is the first element (first-child), we assume it is the "Newer" link. We reposition that to the very right side of the page, but make the link invisible using rgba(0,0,0,0)
We utilize the CSS :after pseudo-class to add text after that link, which says "Next", and color it to be the same color as the link. We position that on top of the invisible link using position: absolute and left: 0
If there is a second link, or if there is only one link in .pagination, then we assume that is the "Older" link, and move it to the far left.
We then treat it the same way as the "Newer" link, but we add "Previous" to it.
Related
This question already has answers here:
How do I not underline an element in a link?
(2 answers)
Closed 2 years ago.
I'm not able to remove the underline from the :before element.
As you can see from the image, I set the underline of the link during the focus event, but I'd like to have the only text underlined and not the icon.
This is the code for the icon:
a:before {
content: "\f058";
font-family: FontAwesome;
}
This is the code for the focus effect:
a:focus{
text-decoration:underline;
}
I tried something like this but it didn't work.
a:before:focus {
text-decoration:none;
}
Use a span inside the link and apply text-decoration: underline on the inner element
a {
text-decoration: none;
}
a span {
text-decoration: underline;
padding-left: .5em;
}
a::before {
content: "\f058";
font-family: FontAwesome;
}
<span>Lorem ipsum</span>
if you cannot change the markup then you have to fake this behaviour, e.g. using a border with a pseudoelement
a {
text-decoration: none;
position: relative;
}
a::before {
content: "\f058";
font-family: FontAwesome;
width: 2ch;
display: inline-block;
}
a::after {
content: "";
position: absolute;
border: 1px solid currentColor;
left: 2ch;
bottom: 0;
right: 0;
}
a:focus::after {
border: none;
}
Lorem ipsum
Text-decoration when applied on a link "a", will result in the underlining on the icon too. Instead, you can use : The Unarticulated Annotation (Underline) element in your HTML code.
HTML code:
<u>Lorem Ipsum</u>
and then, style the in CSS:
u{
text-decoration: underline;
}
This question already has answers here:
Font Awesome 5 shows empty square when using the JS+SVG version
(3 answers)
Closed 3 years ago.
I'm running a React application and I need to render a FontAwesome icon inside of a select form field like in this Codepen
To achieve this, I'm using CSS Pseudo Elements, :after to be specific as defined here
Unfortunately, this works well inside of this CodePen but it doesn't render inside the div on my app. I get a box to show that the FontAwesome icon didn't render and the actual icon appears after the select input. See image below for what it looks like.
CSS
.selectdiv {
position: relative;
}
.selectdiv:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f107";
color: rgb(75,173,233);
right: 0rem;
top: 0.3rem;
height: 2rem;
padding: 0rem 0rem 0rem 0rem;
position: absolute;
pointer-events: none;
}
/* IE11 hide native button*/
select::-ms-expand {
display: none;
}
.selectdiv select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: rgb(75,173,233);
background-color: #ffffff;
background-image: none;
-ms-word-break: normal;
word-break: normal;
}
index.html
<!-- FontAwesome Pseudo Elements Config -->
<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js" data-search-pseudo-elements></script>
<script>
window.FontAwesomeConfig = {
searchPseudoElements: true
}
</script>
Found an answer here
I followed the 'old way'.
I add this line to index.html
<link href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" rel="stylesheet">
and my CSS now looks like this
.selectdiv {
position: relative;
}
.selectdiv::after {
font-family: "Font Awesome\ 5 Free";
content: "\f107";
font-weight: 600;
color: rgb(75,173,233);
right: 0rem;
top: 0.3rem;
height: 2rem;
padding: 0.2rem 0rem 0rem 0rem;
position: absolute;
pointer-events: none;
}
/* IE11 hide native button*/
select::-ms-expand {
display: none;
}
.selectdiv select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: rgb(75,173,233);
background-color: #ffffff;
background-image: none;
-ms-word-break: normal;
word-break: normal;
}
I was able to use this hack: How can I replace text with CSS? --to replace a closing 'X' button on a lightbox from a third party library I'm using. It works great in all browsers but IE11. It seems IE hides both the element and the pseudo-element even though visibility: visible is set on the pseudo. If I toggle visibility using dev tools, they both show up.
Note: if the actual 'X' button were an actual 'X' character, I could easily style it as needed. Unfortunately, they use a symbol, so I have to resort to using this method to "replace" it with an actual X, to match the design standards of the site.
CSS for the button:
/* Hack to replace the close button text */
#_pendo-close-guide_ {
visibility: hidden;
}
#_pendo-close-guide_:after {
content:'X';
visibility: visible;
display: block;
position: absolute;
right: 6px;
top: 8px;
font-size: 17px;
font-weight: 200 !important;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
color: #444;
}
Any help would be much appreciated.
To get this working in IE, I had to use the old "text-indent: -9999px" trick:
/* Hack to replace the close button text */
#_pendo-close-guide_ {
text-indent: -9999px;
line-height: 0;
}
/* Hack to replace the close button text */
#_pendo-close-guide_:after {
content:'X';
position: relative;
right: 6px;
top: 4px;
line-height: initial;
text-indent: 0;
display: block;
font-size: 17px;
font-weight: 200 !important;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
color: #444;
}
My solution was inspired by #Tim's answer. However, I wasn't able to use text-indent due to my specific case so I used
.container {
position: relative;
left: -9999px;
}
.container:after {
position: relative;
left: 9999px;
}
and it worked in IE11 and other browsers.
Im trying to get the links in my footer white #fff however I want to keep the rest of the links on my page the color they already are. How would I do this?
#footer {
background: #3b5998;
color: #fff;
font: 11px/14px Lucida Grande, Lucida, Verdana, sans-serif;
padding: 5px 20px;
}
Perhaps you should add a class to each anchor element within your footer instead of applying the colour to the footer itself:
/*Select only footer tagged elements*/
.footerLink
{
color:#fff;
}
In addition to your original CSS, the following will make your footer links white:
#footer a {
color: #FFF;
}
#footer a {
background: #3b5998;
color: #fff;
font: 11px/14px Lucida Grande, Lucida, Verdana, sans-serif;
padding: 5px 20px;
}
This will style only the a elements in the div (presumably) with the id of footer.
I need to change the color of a button on hover.
Here is my solution, but it doesn't work.
a.button {
display: -moz-inline-stack;
display: inline-block;
width: 391px;
height: 62px;
background: url("img/btncolor.png") no-repeat;
line-height: 62px;
vertical-align: text-middle;
text-align: center;
color: #ebe6eb;
font-family: Zenhei;
font-size: 39px;
font-weight: normal;
font-style: normal;
text-shadow: #222222 1px 1px 0;
}
a.button a:hover{
background: #383;
}
a.button a:hover means "a link that's being hovered over that is a child of a link with the class button".
Go instead for a.button:hover.
Seems your selector is wrong, try using:
a.button:hover{
background: #383;
}
Your code
a.button a:hover
Means it is going to search for an a element inside a with class button.
a.button:hover{
background: #383; }
works for me but in my case
#buttonClick:hover {
background-color:green; }