Adelle Theme: CSS code for changing the site's footer flag ends.

cassandramae90 · Member · Oct 30, 2013 at 11:59 pm
Copy link

Add topic to favorites
So, I have been trying to figure out how to change the right flag on my site’s bottom bar. I have everything for the navigation bar customized perfectly to what I wanted and then about 90% of the footer changed. This is my first time messing with code, so I definitely need some help.

If you need the code that I am using, I am more than happy to post it. Thank you! :)

The blog I need help with is: (visible only to logged in users)

cassandramae90 · Member · Oct 31, 2013 at 12:28 am

Looks like I was able to figure it out. :) If anyone needs the code, I used the following:

}
	.page-template-page-full-width-php #content {
		padding-right: 2em;
	}

@media screen and (min-width: 63.750em) {
	.site-footer:before,
			.site-footer:after {
		border: 0em solid #ff7150;
		content: "";
		display: block;
		position: absolute;
		bottom: 0;
		top: 0;
		z-index: 1;
	}

.site-footer {
	background: #ff7150;
	position: relative;
}
.site-info {
	color: #000;
	font-size: 11px;
	font-size: 1.1rem;
	margin: 0 auto;
	overflow: hidden;
	padding: 0.7em 1.818em;
}
.site-info a:hover {
	color: #000;
}

thesacredpath · Member · Oct 31, 2013 at 5:12 pm
Copy link
Yay! Nice job and thanks a lot for posting the solution.
cassandramae90 · Member · Oct 31, 2013 at 7:43 pm
Copy link
Thank you! ^_^
thesacredpath · Member · Oct 31, 2013 at 8:17 pm
Copy link
You are welcome.
cassandramae90 · Member · Nov 1, 2013 at 3:47 am
Copy link
I have a few more questions that I definitely know I probably won’t be able to find the answers to them by myself.

There is a faint light gray color as the background of my sidebar. Is there any way I could change the color of it?

I would like to make the white color of my main body background a tad bit transparent. Is there a CSS code for that also?
justpi · Member · Nov 1, 2013 at 1:42 pm
Copy link
a) Add this and replace 456789 with the hex for the color you prefer:
```
.site-main .widget-area {
background-color: #456789;
}
```
b) Add this and adjust the decimal number:
```
.site {
background-color: rgba(255, 255, 255, 0.75)
}
```
cassandramae90 · Member · Nov 1, 2013 at 9:04 pm
Copy link
Perfect! I don’t know how you do it, but I’m very grateful! Now I’m content with my site design. :D
justpi · Member · Nov 2, 2013 at 2:05 am
Copy link
You’re welcome!
sinethieme · Member · Nov 18, 2013 at 5:28 pm
Copy link
I think my question is similar, but I am more of a beginner (just having come over from Blogger): Where do you actually enter/change that code above? I’d like to add text with a copyright notice to the bottom of my blog, and I like the Adelle theme, but don’t see a footer on it. Can it be manually added by using CSS (and again, where do you input the CSS code)?
Thanks!
thesacredpath · Member · Nov 19, 2013 at 8:16 pm
Copy link
@sinethieme, to add a copyright to the footer of Adelle, you can use the following CSS. To modify the CSS, you have to have the Custom Design upgrade. You can try out the change by going to Appearance > Custom Design and in the CSS module click the Preview button and paste in the following CSS. I included a font color declaration as well as a size declaration which you can edit as you desire. You can then preview the changes real-time.
```
.site-info:before {
    content: "This is my copyright text";
    color: #FFFFFF;
    font-size: 120%;
}
```
sinethieme · Member · Nov 20, 2013 at 10:15 pm
Copy link
@thesacredpath: Thanks so much, that explains it. I just wasn’t sure what all I can expect to do with an upgrade, as I read elsewhere that it doesn’t really allow you to alter a theme. But what you gave me suits me just fine, so I’ll be upgrading soon. Thanks again.
thesacredpath · Member · Nov 21, 2013 at 3:00 pm
Copy link
You are welcome, and a lot can be done as far as styling and such with CSS. I think you will enjoy it.