I cannot figure out how to get some basic CSS styles to apply to my blog. I'm trying to customize my blog summary page. I want the "read more" button centered and for the picture to show correctly. For some reason the picture keeps moving and it cuts it half off. I've tried multiple things to different classes and nothing works. It was originally on the left with the text to the right of the thumbnail and I'm moving the picture above the text if that means anything.
I've tried text align center for the button in multiple divs and it doesn't budge. Can anyone help? I can only adjust CSS not HTML on my Squarespace site, and the limited styles they give you doesn't allow me to adjust any of this. I'm not a coder, I just kinda understand it enough, so any help is appreciated.
Here is the page: https://www.themodernrenovator.com/blog
Here is custom CSS I added to make the button a circle, but can't get it to center:
text-align: center;
display: table;
width: 100px;
border-radius: 30px;
padding: 12px !important;
background-color: #f0ede9;
margin: auto;
}
.view-list article .excerpt-thumb {
width: 100%;
position: inherit;
}
.view-list article .excerpt-thumb .intrinsic .content {
position: inherit;
padding-bottom: 0px;
}
.intrinsic {
padding: 0px !important;
}
.entry-title {
text-align: center;
}
.article-dateline {
text-align: center;
}
article .post span.inline-action {
display: inline-block;
text-align: center;
}
.article-meta {
display: none;
}
I'd recommend centering the "READ MORE" button using the following CSS, inserted via the CSS Editor:
article .post span.inline-action {
display: inline-block;
text-align: center;
}
The "cut off" image problem, on the other hand, should not be corrected with CSS because it is an issue with Squarespace's ImageLoader function. To correct it, add the following via global Footer code injection. If code injection is not available to you, insert the code via a Markdown block in the footer of your website.
<script>
// Fix Squarespace ImageLoader Bug.
function fixImages() {
var images = document.querySelectorAll('img[data-src]');
var i = images.length;
while (i--) {
ImageLoader.load(images[i], {load: true});
}
}
fixImages();
window.Squarespace.onInitialize(Y, function() {
fixImages();
});
</script>
Your images are cut off because you have a top: value that's currently set to -300px. I can't tell where it's being affected just by looking at this, but somewhere in your styling you have the child img of your excerpt-image getting a top value being set.
To center your 'read more' link: .inline-read-more { margin: auto; }
Related
is anyone here using Elementor?
I'm trying to create a header with Elementor. 3 columns, I have a logo in the left, search bar in the middle and a navigation menu on the right side.
Basically, what I wanted to achieve is something like this.
Expected Output
But what I'm currently done is Output
Adding a border on it Output-with-Border
Here is the issue when the screen/window is resized Issue
Where it should be something like this Expected-output-on-resize
To give you more details, I wanted to achieve the same functionality as the below code on Elementor.
.container {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
.flex {
background: #6AB6D8;
padding: 10px;
margin-bottom: 50px;
border: 3px solid #2E86BB;
color: white;
font-size: 20px;
text-align: center;
position: relative;
}
.flex:after {
position: absolute;
z-index: 1;
left: 0;
top: 100%;
margin-top: 10px;
width: 100%;
color: #333;
font-size: 18px;
}
.flex1 {
flex-basis: auto;
}
.flex1:after {
content: 'auto';
}
.flex2 {
flex: 1;
flex-basis: fill;
}
.flex2:after {
content: 'fill-remaining-space';
}
.flex3 {
flex-basis: min-content;
}
.flex3:after {
content: 'min-content';
}
<ul class="container">
<li class="flex flex1"><div style="background: #000; width: 200px;">Logo</div></li>
<li class="flex flex2"><div style="background: #000; width: 100%; margin-right: 10px; margin-left-10px;">Search-Bar</div></li>
<li class="flex flex3"><div style="background: #000; width: 350px;">Navigation Menu</div></li>
</ul>
I don't think it's possible by using the free version of Elementor. However you can still achieve what you want.
The idea is by using the ShortCode.
Since you are using OceanWP theme plugin then you will need to install the Ocean Extra plugin first.
STEP 1: Create templates
You will need to create a template for those four elements by navigating into your WordPress Dashboard > My Library then create the templates by clicking the Add New button and name them with the following:
search-bar
logo
navigation-menu
header
Each of the templates you created will generate a shortcode so take note of them.
STEP 2: Edit the templates you created using Elementor
Edit the template you created using Elementor, on the search-bar use the widget of Advanced Woo Search since you said you are using its plugin, you may also use its shortcode if it has a shortcode,just search for the widget ShortCode in Elementor then drag and drop it into the section, input the shortcode of the Advanced woo search then make the width full and 100%, save and publish it.
In the template Logo, edit it again using Elementor then use the widget Custom Header Logo as you said you are using it, then go to Advanced > Positioning then set the Width to Inline(Auto) and Vertical Align to Start. This will position the logo in the Left side of the section otherwise, position it into the left side, save and publish it.
Edit the template navigation-menu using Elementor, from the widgets search for Custom Header Nav and use it then position it into the right side of the section.
NOTE: You don't have to change anything in the section of Elementor.
The last thing is the header template, before editing the header template, you must create a shortcode with the tag you created, so don't edit it yet, proceed to next step.
STEP 3: Create a shortcode under your function.php
function cs_custom_header_shortcode( $atts ) {
$logo = do_shortcode('[shortcode of logo template]');
$search = do_shortcode('[shortcode of search-bar template]');
$nav = do_shortcode('[shortcode of navigation-menu template]');
echo '
<div class="cs-flex-container">
<div class="cs-flex-item cs-flex1"><div>'.$logo.'</div></div>
<div class="cs-flex-item cs-flex2"><div>'.$search.'</div></div>
<div class="cs-flex-item cs-flex3"><div>'.$nav.'</div></div>
</div>
';
}
add_shortcode( 'cs_custom_header', 'cs_custom_header_shortcode');
copy and paste the above code into your function.php, I've use your idea, I just replace the tag into div.
Notice the do_shortcode('[shortcode of logo template]');, replace the [shortcode of logo template] with the shortcode of those templates you created.
Your shortcode now for this is [cs_custom_header].
STEP 4: Edit the header template using elementor and use the shortcode [cs_custom_header].
Edit the header template using Elementor, then from the list of widget search for ShortCode then drag and drop it into the section and input the following shortcode [cs_custom_header].
STEP 5: Edit the CSS style.
Go to your Wordpress Dashboard > Appearance > Customize > CSS/JS and input the following CSS style.
.cs-flex-container {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
.cs-flex-item {
background: #6AB6D8;
padding: 10px;
margin-bottom: 50px;
border: 3px solid #2E86BB;
color: white;
font-size: 20px;
text-align: center;
position: relative;
}
.cs-flex-item:after {
position: absolute;
z-index: 1;
left: 0;
top: 100%;
margin-top: 10px;
width: 100%;
color: #333;
font-size: 18px;
}
.cs-flex1 {
flex-basis: auto;
}
.cs-flex1:after {
content: 'auto';
}
.cs-flex2 {
flex: 1;
flex-basis: fill;
}
.cs-flex2:after {
content: 'fill-remaining-space';
}
.cs-flex3 {
flex-basis: min-content;
}
.cs-flex3:after {
content: 'min-content';
}
You may also use it into your css child theme and again I just use your css code.
With the code you provided, I assume you know how to work on most of the thing but just lack on idea of how to do it using Elementor so I won't be very specific in everything, just a guide.
The steps maybe long, but you will achieve what you want with it.
Have a nice day.
So I am a bit stumped on this ... I'm using a WebView in a portion of our app, the reason for the WebView is because we are pulling from an API endpoint that returns to us an HTML string. The font size and other things in this HTML string aren't styled for the purpose of using in a mobile app so we are trying to add some stylistic changes to it for better viewability. I've seen people add Style Tags at the top of the html file to add specific html styles to the element, and everything is generally working except the font size in the HTML of WebView renders differently every time I click into the screen that has the WebView contained in it.
Here is the current code (style + html + script):
let rawHTML = htmlStyle + this.props.itemDetails.body_html.replace("\n", "").replace(/("\/\/[c])\w/g, "\"https://cd").replace(/(width: 10.094%;)/g, "").replace(/(width: 84.906%;)/g, "") + heightScript
I have also console logged this string out in the debugger to make sure it's stitched well, and have even created and index.html and pasted in there the exact string, to make sure it's just showing up properly there.
Here is the style string:
let htmlStyle = `<style>
#height-calculator {
margin: 0;
padding: 0;
}
#height-calculator {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
}
body {
width:100%;
}
h2 {
font-size: 48px;
}
p {
font-size: 18px;
}
h3 {
font-size: 32px
}
img {
width:98%;
}
td {
display: block !important;
width: 95% !important;
}
img {
width:98%;
}
hr {
width: 98%;
}
ol li ol li ol li {
position: relative; right: 85px;
}
ul {
width: 98%,
margin-left: -25px;
}
li {
width: 98%;
}
.tabs {
display: none;
}
.tabs > li {
display: none;
}
.tabs-content {
padding: 0;
list-style-type: none;
}
tr {
display: flex;
flex-direction: column;
}
</style>`
And finally here is the WebView:
<WebView
javaScriptEnabled={true}
onNavigationStateChange={this.onNavigationStateChange.bind(this)}
scrollEnabled={false}
source={{html: rawHTML}}
style={{height: Number(this.state.height)}}
domStorageEnabled={true}
scalesPageToFit={true}
decelerationRate="normal"
javaScriptEnabledAndroid={true} />
Also, as I mentioned all the other styles applied are working, it's mainly just the font size that is super unpredictable.
Here is the view when I click it one time:
And then I don't change or exit the app, I just go back, and then click the same button to enter that same display and I get this sometimes (it sometimes takes multiple clicks ... it's very unpredictable):
I have a video of this as well, if you feel that would help this explanation. I'm trying to retell it the best I can haha.
Edit:
I think this might be a simulator only related issue? If anyone could speak some wisdom into that, that would be awesome still. I can't seem to reproduce this error on production build.
I recently experienced the same issue. It was only occurring for me on iOS, not Android.
The weirdest part is the inconsistency in replication. I couldn't find any pattern to when the WebView content would be sized differently. Identical HTML would result in font size that was sometimes normal, but other times very tiny.
My solution came from a (RN 0.47) WebView prop:
scalesPageToFit?: bool
Boolean that controls whether the web content is scaled to fit the view and enables the user to change the scale. The default value is true.
I tried setting scalesPageToFit to false, and voilà, the page stopped scaling down:
<WebView
source={{ html: myHtml }}
scalesPageToFit={false}
/>
The only problem is that this caused my content to be scaled larger than the WebView's container on Android. To fix this, I simply set the scalesPageToFit prop conditionally, based on platform:
<WebView
source={{ html: myHtml }}
scalesPageToFit={(Platform.OS === 'ios') ? false : true}
/>
Worked like a charm for me!
I used react-native-render-html. The reason I choose this solution over the accepted answer is because I can style html tags using react native styles instead of injecting style declaration string before the actual content.
const htmlStyles = { p: {fontFamily: 'Lato'} }
const htmlContent = <H1>My Html</H1>;
<HTML containerStyle={ {margin: 16} }
html={ htmlContent }
tagsStyles={ htmlStyles } />
I'm trying to edit the colors of my user profile page on my site www.wastelandgamers.com/user-profile I would like for the fields tat are blue to be white instead and the text in those fields to be black instead of white.
I am able to change them when I use the developer tools through Google Chrome and get the desired look, however, I am not able to find the HTML doc that I need to change in order to get the look I want. I have searched through nearly all of the relevant site files using file manager through cPanel with no luck.
Here are a screen captures of before and after the color change using developer tools.
Before code change:
After code change:
Code I need to change (.entry-content towards bottom)
.tml-profile {
max-width: 100%;
}
.tml-profile .tml-form-table {
border-collapse: collapse;
}
.tml-profile .tml-form-table th,
.tml-profile .tml-form-table td {
display: block;
vertical-align: middle;
width: auto;
}
.tml-profile .screen-reader-text,
.tml-profile .screen-reader-text span {
height: 1px;
left: -1000em;
overflow: hidden;
position: absolute;
width: 1px;
}
.tml-profile .wp-pwd {
text-align: right;
}
.tml-profile .wp-pwd .dashicons {
font-size: 1em;
line-height: 1;
height: 1em;
width: 1em;
vertical-align: middle;
}
.tml-profile #pass-strength-result {
margin: 0.5em 0;
}
.hidden,
.no-js .hide-if-no-js,
.js .hide-if-js {
display: none;
}
#media screen and (min-width: 768px) {
.tml-profile .tml-submit-wrap input {
width: auto;
}
}
.entry-content tr th, .entry-content thead th {
color: #cbcbcb;
background-color: #fff;
}
I am using the Parabola theme for my site and Theme my login for the profile page.
If anyone knows why I'm unable to find the file I need to edit or of another way to make the change I would really appreciate the help! If you need any more information let me know.
I'm not a fan of WordPress themes, but some of them do allow for custom CSS. Google found me this:
we have created a special input field right in theme’s settings page.
You’ll find it by going to Appearance > Theme Settings, then expanding
the Miscellaneous Section by clicking on it. The Custom CSS field is a
bit further down.
You should see this: https://www.cryoutcreations.eu/wp-content/uploads/2012/11/themesettings-customcssjs.png
In this area (indicated by the blue box), you will want to PRECISELY recreate the code you have circled above (http://i.stack.imgur.com/00cxb.png) EXCEPT for changing the #colour to your desired colour.
I have the following Jade template:
extends layout
block content
h2 Characters and Portraits
div(id="portraitsBox")
- var portraits = ["Clown-Fox", "Dragon-Bear", "Fish-Bear", "Deer-Wolf", "Salamander-Ant", "Side-Duck"];
for filename in portraits
- var url = "/images/portraits/" + filename.toLowerCase() + ".png"
div(class="characterBox" id=filename)
h3(class="characterName")= filename
img(class="portrait" src= url)
link(rel='stylesheet', href='/stylesheets/characters.css')
Which pulls from the following CSS:
#portraitsBox {
border: 1px solid black;
padding: 10px;
}
.characterBox {
position: relative;
padding: 5px;
border: 1px solid black;
width: 350px;
display: inline;
}
.characterName {
padding-top: 0px;
width: 150px;
font: Arial;
text-align: center;
}
This works fine if I take out display: inline, but every time I try put it back in I get this garbage:
http://www.orderofthemouse.co.uk/characters
And the container div resizes itself to 169.9px wide!!?
What's going on here? I checked with Firebug and it doesn't look like any of the Bootstrap default stylings are over-riding my own CSS (they're called in the extended layout file) or anything like that, and there's nothing in the cascade that should be causing it, to my reckoning. When I look at the generated HTML all the elements are nested as expected, which was my next consideration so it doesn't seem to be anything silly I overlooked...?
Do you want to get this result: http://screencast.com/t/c06yM3cr
I am confused because you said that it works fine if you disable display inline, and when I tried that they were still displaying as block.
If your desired result is what I have in the sceenshot, all you have to do is set the wrapper #portraitsBox to display: flex.
I have created a wordpress single theme, but I am getting confuse with CSS code, where CSS rules should change the display to make menu and image slider revolution look closer.
I would like to reduce the space between the main navigation menu and my revolution slider
This is my website url: http://www.warungrempong.com/
I am trying to use this CSS code:
.admin-bar .nav-container {
min-height: 0;
}
But it's not working as desired and only work when I am using it on my browser dev tools.
When I try to change in my website, nothing happen.
How can I solve this issue?
Thanks.
In the style.css file of your active child theme (or theme), You should add this:
.nav-container {
min-height: inherit !important;
}
When looking at the generated source code of your home page, it seems that your theme is embedding some CSS rules in the html document, as you have this (on line 41 of that source code):
<style id='ebor-style-inline-css' type='text/css'>
nav .pb80 {
padding-bottom: 0px;
padding-top:0px;
}
.pt120 {
padding-top: 0px;
}
.nav-container { /* ==========================> HERE ONE TIME */
min-height: 0;
}
.logo { max-height: 300px; }
.nav-container { /* ======================> HERE ANOTHER TIME
As this is the last instance, it get the priority on first one! */
min-height: 491px;
}
.admin-bar .nav-container {
min-height: 523px;
}
#media all and (max-width: 767px){
.nav-container {
min-height: 366px;
}
.admin-bar .nav-container {
min-height: 398px;
}
}
</style>
So may be you have add this CCS rules yourself somewhere in your theme settings. The best thing, should be to remove that 2 repetitive CSS rules, and your issue should get solved without any need…