I am trying to customise the headers in the checkout pages. We're selling flowers. I have used a few replace string commands to change "billing details" to say "are you buying for yourself?" and "Ship to a different address" to say "are you sending to someone else?"...
My question is, I now have the headings as per the attached image. I would now like to the two headings to look the same (so "are you buying for yourself" shouldn't be bold etc).
Also, I want to add a line of text underneath each heading.
If anyone could please tell me how to do this, I'd very much appreciate it.
I'm very new at this - so i think it has something to do with the CSS file now, but I have no idea!
Thanks in advance!
Michelle
enter image description here
if you want it to look like below:
add the following this line to your css file:
.woocommerce-billing-fields h3 {
border-bottom: 1px solid;
padding-bottom: 6px;
}
.woocommerce-checkout label span
{
font-weight: 400;
font-size: 22px;
border-bottom: 1px solid;
padding-bottom: 6px;
}
Related
I would be very grateful if someone could help me please.
I got to add an additional CSS code to the "code blocks", with the below code:
pre.wp-block-code {
border-left: 9px solid #F26C4F;
background-color: #1B325F !important;
padding: 15px;
But, I I need to edit also that tags, i.e., for the inline code.
Let's say I am writing a paragraph and need to insert a piece of code inside of it, as for example "top command", when the top would have to be inserted between and . So only the word "top" would be "printed" differently (with a custom background, for example).
How to achieve this, please?
Thanks in advance.
By using the tags as selector, alternatively using p in addition.
Something like
p code {
background: gray;
border-radius: 2px;
padding: 0.15em 0.35em;
white-space: normal;
}
please have a look at the attached picture... For a wordpress site I need to enter a custom CSS. I have a slogan or company name which needs to have a background color. But when the site is responsive and the text is splitted into another row, I need a space.
But when I search through google I only get results for changing the complete background of the text field.
.ueberschrift {
background-color: #FF00E9;
padding: 8px;
}
Can somebody help me?
Regards
Markus
My results...
try changing the css code to:
.ueberschrift p {
background-color: #FF00E9;
padding: 8px;
}
i added a "p" after ".ueberschrift" class which should only select the text.
If I understand you need a margint(white space) between Schwere and disthymische.......
To achive this you must think first of all to put the all sentence in 2 containters.
for example:
HTML:
<div class="ueberschrift">
<span>Schwere</span>
<span>disthymische.......</span>
</div>
CSS:
.ueberschrift span {
background-color: #FF00E9;
padding: 8px;
margin-bottom: 8px;
}
In this way you will set a margin bottom between 2 spans, when you at a small resolution.
I can't seem to find a solution for this. I have a custom css for the titles on my website
.qodef-e-title {
color: black;
}
Now I have an "Awards list" element on my page that also uses Titles in the list. I want those titles to be white. I have already added a custom class to the Awards List element via Elementor. But I can not seem to find out how to change the title. The custom class that I added is "awards".
I hope someone can help me out with this.
This is the url: https://cfxdigital.nl/Schilderwerken/?page_id=1858&lang=en
Its about the text below "
Some things we are proud of."
So you want to change the color of the line, years and link icon into white, right?
Then you need to change it as followed:
.qodef-awards-list article.qodef-grid-item {
border-top: 1px solid white;
}
.qodef-awards-list article.qodef-grid-item .qodef-e-inner {
color: white;
}
.qodef-button.qodef-layout--textual {
color: white;
}
I made a Contact Form 7 on my Wordpress website: http://ppcdigitalblack.com/contact/
I want it to include: full name*, email address*, message*, and budget dropdown list (not required)
I want full name and email address in centered field boxes that each take up half the space. I also want the font to be Lato and blue... For some reason "your full name" is gray!!
I tried all the tricks from this blog post but no luck:
https://deliciousthemes.com/contact-form-7-fields-columns/
So I'm wondering if there's a CSS trick for these two things, or if you guys have a trusted plug-in to format Contact Form 7 that works well with Uncode.
This is the code I have for the contact form, attempting to manipulate the font:
.contactform {
text-align: center;
font-family: 'Lato';
color: #777777;
}
This is the code I have for the width of the form, which actually gave me a more prefered form width. I'd just love to center the form fields at least, but ideally get Email and Name on the same line!
.wpcf7-form {
max-width: 800px;
margin: 0 auto;
}
Appreciate any thoughts or advice!
I think this will help you.
(For some reason "your full name" is grey!!) - This is because other labels are raped inside <p> and this label is not if you can apple the same to this then its ok. or you can just use this style.
form .contactform>label{
color: #007ec7;
}
For using font-family: 'Lato'; you better do the following -
Attach a font family URL in the <head>if you don't have yet -
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
and you can apply as following below -
form .contactform {
text-align: center;
color: #777777;
font-family: 'Lato', sans-serif;
font-weight: 400;
}
For centre align the <input> you can use -
form .contactform input[type="text"],form .contactform input[type="email"]{
margin: 9px auto 0 !important;
}
Hope this was helpful. IF there is anything else feel free to ask. :)
I have a webpage made by me. At this moment, on different screens, it is looking pretty different.
On my computer the "See More" text is looking like this (which is I want):
FIRST IMAGE:
Whereas on another computer(with different screen size), its looking in this way(which is not I want):
SECOND IMAGE:
In this SECOND IMAGE, the "See More" text is not in a single line for some reasons (on different screen) which is not I want.
Note: I have marked "See More" text with pen so that its easy for the readers to look for the text.
The CSS codes which I am using for the "See More" text are:
.development-text .right-side-bottom {
padding-left: 220px;
padding-right: 0px !important;
font-style: italic;
}
I am wondering what changes I need to make in CSS so that its look same on different screen size computers.
In this class .development-text .right-side-bottom remove padding-left: 220px; and add text-align: right;.This changes you need.
.development-text .right-side-bottom {
font-style: italic;
padding-right: 0 !important;
text-align: right;
}
For your specific problem, this should solve it:
.development-text .right-side-bottom {
text-align: right;
padding-right: 0px !important;
font-style: italic;
}
Yet, this is only a small problem compared to the full set of problems that you will encounter in the process of coding a responsive page. I really recommend you take a course in responsive design, such as Learn Responsive Design