How can I style external links like Wikipedia? - css

I would like to distinguish between external and internal links using just CSS.
I would like to add a small icon to the right side of these links, without it covering up other text.
The icon I would like to use is the icon used on Wikipedia.
For example, this is an external link:
StackOverflow
This is an internal link:
home page
How can I do this using just CSS?

demo
Basics
Using :after we can inject content after each matched selector.
The first selector matches any href attribute starting with //. This is for links that keep the same protocol (http or https) as the current page.
a[href^="//"]:after,
These are the traditionally more common urls, like http://google.com and https://encrypted.google.com
a[href^="http://"]:after,
a[href^="https://"]:after {
We can then pass a url to the content attribute to display the image after the link. The margin can be customized to fit the
content: url(http://upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png);
margin: 0 0 0 5px;
}
Allow certain domains as local
Let's say we're on example.org and we want to mark links to blog.example.org as on the same domain for this purpose. This is a fairly safe way to do it, however we could have a url like http://example.org/page//blog.example.org/
note: make sure this comes after the above in your styles
a[href*="//blog.example.org/"]:after {
content: '';
margin: 0;
}
For more strict matching, we can take our initial settings and override them.
a[href^="//blog.example.org/"]:after,
a[href^="http://blog.example.org/"]:after,
a[href^="https://blog.example.org/"]:after {
content: '';
margin: 0;
}

I think this will help you resolve the issue simply,
Add an offsite link icon after external links with CSS
Quote from the article:
This will make all links styled with an external linked icon in the end,
a[href^="http://"] {
background: url(http://upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png) center right no-repeat;
padding-right: 13px;
}
And following code will prevent the external icon style on specific urls:
a[href^="http://www.stackoverflow.com"] {
background: none;
padding-right: 0;
}

OK, this is pretty similar to the other answers, but it's short and sweet and works for both http and https. Of course, you will have problems if you use double slashes in your internal URLs, but you shouldn't be doing that anyway (see these questions).
a:not([href*="//"]) {
/* CSS for internal links */
}
a[href*="//"] {
/*CSS for external links */
}
I wish I'd known about this before I tagged all my links with class="internal" and class="external".
So to add an image, as already stated:
a[href*="//"]::after {
content: url(/* image URL here */);
}

Related

Finding the right path for css styling a video

I'm using a video plugin for my wordpress site.
I want to change the width of the videos.
However it seems like I'm not using the correct path for the id, as I'm not seeing any changes from my css styling.
This is the info I have gotten from using the editor in chrome:
I want to change the inline styling, so I read I had to use !important to overrule it. But for testing I just used bg-color.
I have tried to access the video with these attempts with no success:
.vjs-tech {
background-color: red;
}
#player_html5_api.vjs-tech {
background-color: red;
}
#player_html5_api {
background-color: red;
}
video#player_html5_api {
background-color: red;
}
After a good chat with Gosi, I found the issue to be the video I wanted to be changed had its css located in another folder than the regular wordpress css folder, since it's a plugin. So I had to go in the plugins css folder and make my changes there.

Unable to fix space issue in Home Page

I am creating my new travel website https://airlineticketsbestprice.com. So I have downloaded a travel theme and updated my content.
Also, I have add some more section in home page (example call to action, popular destinations, subscribe newsletter and latest aticle ). But as I have noticed that there are much more space between these section, so I am trying to fix this through CSS file but issue still remain.
So could you please tell me which file and CSS file class should I change.
Kindly help me to send exact Css class file code.
Thanks
In your style.ccs you might change this:
p {
margin-bottom: 1.5em;
margin-top: 0;
}
to this:
p {
margin-bottom: [any number]em;
margin-top: 0;
}
or
p {
padding-bottom: [any number]em;
margin-top: 0;
}
Please note, that it will effect all your paragraphs on your website.
Or if you don't want to have any space after a paragraph use the Shift+Enter combo.

SquareSpace: Change section background color (Eamon / Ethan template)

Example template:
https://eamon-demo.squarespace.com/#overview-eamon
Is there any possible way to change the background color of a single white section with text in the Ethan / Eamon theme? I've had no luck with
<style>
.body {
background-color: lightblue;
}
</style>
in the Advanced section of the page editor. I am looking to change only one of the section's background colors, I do not want to change them all. Thanks.
Solution!
I was able to make it work on a section called "titles" adding the following to the CSS Editor:
section#titles {
background-color: lightblue !important;
}
Yes, it is possible by targeting via the CSS attribute selector. For example:
[data-url-id='titles-eamon'] .content, [data-url-id='titles-eamon'] .content-inner {
background-color: lightblue !important;
}
The above code would be inserted via the CSS Editor. The data-url-id value corresponds the URL Slug of the index page section (see image).
You can inspect the code of the page user your browser's developer tools (often by hitting F12 or CTRL+SHIFT+I). That will help you explore the code of the page for this and other similar issues/customization.

Ways to allow users to change the color scheme of their account page

Okay that title may not have been too clear, I am building a site for a client that will allow his clients to sell his merchandise. We will call his clients dealers. The dealers want to be able to change the logo and color scheme of the site to match their site. I do not want to go to every single div and table etc. and create a field in the database for it but at the same time I can't let them have full control over the CSS and potentially demolish what their site looks like.
What is the best way to handle this and why?
You can use SASS, http://sass-lang.com/, to achieve this.
custom.scss: - This is what you give to the clients to customize as they want to
/* COLORS */
$backgroundColor: #bada55;
$h1color: #red;
$navigationBackground: #yellow;
$navigationText: #black;
$navigationHover: #red;
$navigationFont: Tahoma;
...etc..
/* WIDGETS */
$arcticleBorderRadius: 5px;
...etc...
/* OTHER CATEGORIES */
In your app.scss import the custom.scss:
#import "custom.scss";
/* YOUR "PRIVATE" CSS RULES /*
body {
background-color: $backgroundColor;
}
aside#nav {
background-color: $navigationBackground;
color: navigationText;
> ul > li:hover {
background-color: $navigationHover;
}
}
/* etc, etc */
You can also use functions to lighten, darken, invert the base colors the customer can overide in custom.scss.
The "workflow" can be:
Customer overrides what they want, and what is available in custom.scss.
You get the custom.scss from the client, compiles a new css, e.g. acme-app.css.
The client calls the site with a request attribute "acme", or a path-variable http://www.myawesomesite.com/acme, in the url that identifies which generated css to load.
After reviewing the options given here and thinking hard about this I have decided that the truly best option for my situation is in fact limiting the items that people are able to change the color of and just store the options in the database. It is more work to begin with but saves on issues in the future

Can I remove the URL from my print css, so the web address doesn't print?

I have written some stylesheets - including a print.css - and it's working fine.
I'd like to remove the URL from printing out on each of the pages. I am beginning to wonder if it is impossible. Is there an element/option that I can set to display:none to do this?
The reason is that the specific pages that have a 'normal' and 'print' stylesheet have been specially formatted so when printed, it forms a meaningful booklet. Therefore the URL is irrelevant.
In Firefox, https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (view page source :: tag HTML).
In your code, replace <html> with <html moznomarginboxes mozdisallowselectionprint>.
In others browsers, I don't know, but you can view http://www.mintprintables.com/print-tips/header-footer-windows/
Sadly, no. The header and footer are generated by the browser. Only the end-user can change the footer - it might be an idea to give the user a step-by-step for each browser what to do. See for example here for a set of illustrated walk-throughs for windows based browsers.
The only alternative I know of is generating PDFs, with which you have full control over the printed output.
Use that code.that will help to solve your problem
#media print
{
#page { margin: 0; }
body { margin: 1.6cm; }
}
#media print
{
a[href]:after { content: none !important; }
img[src]:after { content: none !important; }
}
you can try this in the stylesheet:
#page{size:auto; margin-bottom:5mm;}
But this also removes the page number
This solution will do the trick in Chrome and Opera by setting margin to 0 in a css #page directive. It will not (currently) work for other browsers though...
It depends on your web browser. If you're using Firefox you can adjust or turn off those header and footer lines (URL, page number, etc) by going into File > Page Setup then clicking the Margins & Header/Footer tab.
If I understand you correctly, you talk about the page headers and footers. They are printed by the browser. They are not part of your HTML content, so you can't influence them directly.
Show your users how to disable headers and footers in the «Page setup...» dialog.
The headers and footers for printing from browsers is, sadly, a browser preference, not a document-level element that you can style. Refer to my very similar question for further workarounds and disappointment.
Historically, it's been impossible to make these things disappear as they are user settings and not considered part of the page you have control over.
http://css-discuss.incutio.com/wiki/Print_Stylesheets#Print_headers.2Ffooters_and_print_margins
However, as of 2017, the #page at-rule has been standardized, which can be used to hide the page title and date in modern browsers:
#page { size: auto; margin: 0mm; }
Credit to Vigneswaran S for this tip.
Remove the url from header and footer using below method
#page { size: letter; margin-top: 4mm;margin-bottom: 4mm }
I've also tried everything but finally I'm writing below code to make URL shorter:
var curURL = window.location.href;
history.replaceState(history.state, '', '/');
window.print();
history.replaceState(history.state, '', curURL);
But you need to make a custom PRINT button for user to click.
Now we can do this with:
<style type="text/css" media="print">
#page {
size: auto; /* auto is the initial value */
margin: 0; /* this affects the margin in the printer settings */
}
</style>
Source: https://stackoverflow.com/a/14975912/1760939
I assume that you are talking about the URL that shows in the footer of the page.
If so, this is set by the browser and it is not something that you can do from your code.
I am not sure but the URL is added by a browser when you want to print. It is not part of the page so can not be affected by CSS. Maybe there is a way but it will be browser dependent.
i found something in the browser side itself.
Try this steps. here i have been mentioned the Steps to disable the Header and footer in all the three major browsers.
Chrome Click the Menu icon in the top right corner of the browser. Click Print. Uncheck Headers and Footers under the Options section.
Firefox Click Firefox in the top left corner of the browser. Place your mouse over Print, the click Page Setup. Click the Margins & Header/Footer tab. Change each value under Headers & Footers to --blank--.
Internet Explorer Click the Gear icon in the top right corner of the browser. Place your mouse over Print, then click Page Setup. Change each value under Headers and Footers to -Empty-.
This is a browser issue. But you can handle this problem by these line of codes:
<style type="text/css" media="print">
#media print
{
#page {
margin-top: 0;
margin-bottom: 0;
}
body {
padding-top: 72px;
padding-bottom: 72px ;
}
}
</style>
For Internet Explorer, go to Tools. Click on the print option and then page set up. Under headers and Footer, make all the choices "empty". Then it will not print out on your printed pages.
I hope this helps.

Resources