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.
Related
Does anybody know how to force mdbook to use the whole content area? Currently there is a large margin left and right and the whole content (especially tables) are heavily compressed.
See https://github.com/rust-lang/mdBook/issues/1847
Full quote from the link:
There isn't a specific setting for the width. Something like this should work:
:root {
--content-max-width: 500px;
}
There are several css files and such that you can override. https://rust-lang.github.io/mdBook/format/theme/index.html discusses the files, and mdbook init --theme will give you a copy of the defaults.
The answer of sarema points exact to the correct solution, but there is still one detail which is important. So, for everyone else who is interessted in this problem, here the full solution:
In the main book.toml file you can specify a custom .css file:
[output.html]
additional-css = ["custom.css"]
In this custom.css file you can override all available css classes as sarema already has posted:
:root {
--content-max-width: 500px;
}
When you take a look to the page source within your web browser, you can examine all the available css classes. https://rust-lang.github.io/mdBook/format/theme/index.html gives an overview about the main .css files, but in order to get the details there is no other solution than to examine this files by hand. So in my case I have additionally changed some margins of .css classes I found in the page sources like this:
:root {
--content-max-width: 80%;
}
.chapter li.part-title {
color: var(--sidebar-fg);
margin-bottom: -5px;
margin-top: 11px;
font-weight: bold;
}
.chapter li.chapter-item {
line-height: 1.5em;
margin-left: 0.5em;
margin-top: 0.6em;
}
Hope, this description is helpful for some others who despair of the styling of their mdbook ;)
Having the oddest dilemma. I've modified the rest of my site pretty extensively with custom css coding for my theme. The rest of my site is fine, but things get thrown off in my checkout page since the upgrade to the latest version of wordpress.
In any case, you can see what's going on here:
https://sportsautotech.com/checkout/
As you can see, both the 'billing and shipping' box fields and 'your order' box fields are below each other in 1 column.
I'd like them side by side as indicated in the attached picture.
I currently have no custom css inserted for this checkout page. I've tried adding custom css code as suggested by other posters through google searches, but none seem to work and actually make things worse.
If I can get that solved, does anyone have any suggestion on how to fix the other 2 smaller issues with the State field indentation and Phone number field dropping down a line?
Thanks so much for any potential help! Please refer below.
Images:
currently
desired
to achive your target result past the below css in your style.css or in the WordPress customiser :
.row-fluid .span6 {
width: 46.93617% !important;
}
#billing_postcode_field{
float: left;
width: 45%;
}
#billing_phone_field {
width: 50%;
float: right;
}
#billing_state_field, {
float: unset !important;
}
.payment_method_stripe{
margin-top: 3rem
}
OutPut:
I updated my style.css sheet to get rid of a white space at the top of my pages. I know exactly what line of code to edit because when I inspect the page and make changes I can get rid of the white bar. However, when I change this in the style sheet nothing happens. It saves my changes on the style sheet but when I go back to the inspector on the page it hasn't been changed. Is there something I need to do to make sure this change effects the right pages?
This is the section I have changed:
.page_content_wrap
{
padding: 0;
}
This is how it appears on the inspector:
.page_content_wrap
{
padding: 5em 0;
}
Well,you didn't mention about what Html/Css framework you are using. I think your css is getting overrided.Try with this
.page_content_wrap
{
padding: 0 !important;
}
I am modifying my site using Custom CSS and whenever I make changes, it affects the whole site. I wanted to make only changes to the posts and pages and seperately for the homepage.
I asked my theme creator and this is what they replied.
"To know if you’re on homepage or a single page, check the classes on #content-wrapper-inside element. It will have ‘.home’ class on homepage, and ‘.single’ class on single post." I wasn't able to find.
I used these to customise,
#media (min-width:960px){
.main-content{
display: block;
padding-left:253px;
}
.sticky-kit-wrapper {
margin-bottom: 120px;
margin-left: auto;
margin-right: auto;
max-width: 1480px;
}
.sticky-kit-wrapper {
padding-left: 60px;
padding-right: 0;
}
This affects the entire site, is there anyway I can code separately for my homepage?
My website is, www.defensionem.com
Thank-you for the help.
Pretty easy, your theme is actually doing all the heavy lifting for you. All your pages in the site have the location built into the wrapper, so all you need to do is target the correct wrapper for the page eg:
Home : home
Archive : archive
Single : single
Page : page
So you css would look something like:
/* need to modify the home page */
.home .sticky-kit-wrapper {
display:none;
}
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 */);
}