Trying to orientate myself with Jekyll. I've downloaded the following theme Mediator Theme. I'm trying to adjust the social icons to show icons for things like Github and Linked in. When I pop over to the _icons.scss file in the _assets folder/stylesheets I see this crazy thing for the background image of the icon. I'm assuming I have to create new icons with a similar format? What on earth is going on with this background image? Has anyone seen this before?
.icon-facebook {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAACgCAYAAACbg+u0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyNzI3RUZFOTE5QUMxMUUzQjlGQkJERENBQjc5RjE3RiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyNzI3RUZFQTE5QUMxMUUzQjlGQkJERENBQjc5RjE3RiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjI3MjdFRkU3MTlBQzExRTNCOUZCQkREQ0FCNzlGMTdGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjI3MjdFRkU4MTlBQzExRTNCOUZCQkREQ0FCNzlGMTdGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ExBpwAAAA0JJREFUeNrsnTFrFEEYhndF0GA8MZg+BkXERhuN+gustLRMI/4FLbSysFdEwc7GMpAiSqwsLEyjhViqhWCboOilWd+5G9Ts3u3ezGfudnLPA2+VzeXyMLczs7fsmxdFkUE8+1CAwNYJPKOsKV2lID0Pa95Lhbx0DnQHvVE6jK0KW8ol5UPdCLyPvKF0vJ/aEfhLOYCrobiP88E6gaxpmsmZhVnGIBCBgEAEtoH9e+z/+ai8Vt4rX5QfPrP+524Nd0g5oswrx5SLyuVpFugW/0+VR15gKMvTLPClctOPNs6BgdxTrkxSXsoj0Mm7wywch7s2d5dlTBw/lRtZiy56pCbwofKVhXQchV+qsBOJZEP5zE4knleRv3dSOaccVWYG/Pz8tAh8G3j8CeWZssQI7PMp4NgZv0tZ5Bz4l5DZ9+o45KUmsBtw7NK43lRKAr8HHDuHQBsdBCYCAhGIQAQiEKJpw91ZT5THIxz3LuA1j2f9ry5H4blyKsRZ2/bC3wLl/O998zwfYduCew6B8SwwiSBwoiwikBGIQARyDkRgDG79d9j6Im3YiVxXzo5w3LWA17ytXGg4Znav7IWj9qANrGT9b+Z2/X1wNYZzIAIRiEBAIAIRiEBAIAIRiEBAIAIRiEBAIAIRiEBAIAITE9hFSS3dJoHrOKplvUngraz/uF+osuX91Ap0z0h2z0p+oWzjrMe291F5hrQjp4yAWRiBCEQgIHBSuFn432T0iQztEym76vkaIG8TaQOzOUhiWeAqomqzWha4YyGd5zl9Ig0XE+RreJ+IBLItaZ4zuEufZQwCEQgIRGAroE/E2CdS3omkuDtwj4d/oJyOVLAc8vfKOxH6RKb4HEifiFEefSKR0CdigD4RI/SJGKBPxAh9IkboEzFCn4gR+kSM0CdihD4RI/SJjBH6RFIBgQhEIAIRCNG04e6spPpEyndn0SdCn4h5wU2fiIEFJhEEThSepc8IRCACOQciMAr6RGoYW59ISneohrCyW++jfIcqV2M4ByIQgQgEBCIQgQgEBCIQgQgEBCIQgQgEBCIQgQgEBCIwMYH0idRDn4gR+kQMNPeJFEVBn0iVP30i3s8O6BNhFkZg0vwWYACVpaAuJblZHgAAAABJRU5ErkJggg==);
background-size:14px;
background-position:0 0;
width:14px;
height:14px;
}
What is the background image referencing? I've never seen this before. I figured they were just pulling in the font awesome library but the syntax I'm used didn't work and then I found this. Any help would be greatly apprecaited.
Related
Today I was adding a Call To Action element in elementor and I set an image as the background and I changed the border radius to 5 (Under advanced> border> radius) and the border appears rounded on the editor and the preview but when I view the page from my device (iPhone) the image in the call to action is not rounded like it appears in the editor or preview. I tried playing around with it and I figured out that the border will apply if you have a color as a background of the call to action but will not apply if you have an image as a background. I've had the same issue before with the Slides Widget however I was able to resolve this by using some CSS
selector .swiper-slide-bg, selector .elementor-background-overlay { border-radius: 20px!important; }
,that I found on this article: https://mcstarters.com/blog/add-border-radius-to-the-elementor-slider-element/ . I then tried to create my own code:
selector .elementor-cta-background-overlay {
border-radius: 20px!important;
}
But this did not solve the issue. This is not a plugin or theme conflict I created brand new websites with nothing but Elemntor and pro installed and still had the same result. If anyone is able to figure this I would GREATLY appreciate it as I've spent HOURS online trying to find some CSS to solve this with no luck. Even reached out to Elemntor support out of desperation but even THEY can't figure it out. Any CSS Code Would be appreciated thanks.
[These Are Some Images To Help]
[What Elemntor Preview Looks Like]: https://i.stack.imgur.com/D7DiF.jpg
[What it looks like on my Device]: https://www.icloud.com/photos/#0e6G2hxKFShWs5dENCe5VGfpg
This worked for me:
.elementor-cta .elementor-cta__bg-wrapper {
border-radius: 12px!important;
}
I've recently started a new website with Wordpress through blue host.
I'm completely new to this and had never even heard of either of these programs up until last week.
I downloaded a theme from Mojo marketplace linked to blue host called Solstice. I've managed to make some customer changes and get some pictures and pages and post headers on there.
The only trouble I'm having right now is that I've wrote text in the About us section but it doesn't show up on the website. I haven't downloaded any plugins yet and the template it still set to default.
I have tried googling the answer but not had much luck.
Any help would be greatly appreciated.
www.2lostbuffaloes.com
As Naveed mentioned, the text color is white, over white background, that's why you can't see it. If you add to your css this rule:
body {
color #000000;
}
The text should appear.
You will probably also want to add white to the text color of the footer:
.footer-top, .footer-top a {
color: #ffffff;
}
In style sheet, you need to do
body{
color : #000000;
}
Right now its white color for text, if you do control A on about us page you will see all text.
Hoping someone can help me with a body tag overide I'm having trouble with. Here's the page I'm working on: http://www.designbyantony.com/JMP%20Bootstrap/index.html
I'm trying to set a responsive full screen background image to this (homepage only) by using the full.css file linked to the page. I've attached a screenshot of what I'm aiming for - the image is the jpg marked up in full.css. I was hoping this css file would override any other body declarations in the other css files but it's not working. I have tried assigning a body ID to this page ( etc) but this hasn't worked either - and I disgarded it. I know this is a specificity issue but I can't figure this out. Oddly the background image shows up in DW CS6 design preview (never to be relied on I guess) but not in the browser.
Thanks for taking the time to read this - hoping someone can at least steer me in the right direction.
Thanks, Antony
can you try to change you css for body tag in full.css file to
background-image: url('../images/john-landing.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
I am designing a website using the Flat UI Twitter Bootstrap mod. While trying to set a background texture, I have found that it is not visible. Here is my CSS:
body
{
background-color: transparent;
background-image: url(img/texture.png);
}
Can someone help me to get my background texture to work?
Without more details, the first thing I would check is the path to the texture.png image. Since its a background image, the url is relative to your stylesheet.
So say your your CSS is in the website/css folder and the texture is in the website/images folder, your CSS would be more like:
body
{
background-color: transparent;
background-image: url(../images/img/texture.png);
}
If you know how to use the web inspector or something similar on most browsers, it will help to pinpoint the source of the problem.
Good luck!
I have a problem with my background colors. on some pages i use TinySlider, and it sets the background color to grey. And when i try to change it to for example Orange, it will only change on those pages that does not use Tiny Slider. Is there a way to fix this?
I have uploaded the files to google drive. The link for all files
The style.css is for the TinySlider, while the stilark.css is the one that is used for all the pages.
the index.html uses TinySlider, while skolen.html does not.
I hope you can help me.
Try changing the
body {font:12px Verdana,Arial; color:#555; background:#ddd}
of "style.css" into
body {font:12px Verdana,Arial; color:#555; background-color:#FEAD41}