[PrayersNApples]

@jchai: Am I headed in the right direction with the current code or do you think there's a better way to go about this? (If the current code is a strong start: is my next step trying to make it mobile responsive?)

[PrayersNApples]

I'm thinking an image like: http://littleoneslittlewords.com/wp-content/uploads/2017/04/Sample-Text-Container.jpg would probably work best to replicate the effect achieved by: http://www.stephanemartinw.com/ but, again: I'm not sure if I'm on the right track with the above code (and just need to manually play around with image position/size + making it mobile responsive) or if a different route makes more sense.

[PrayersNApples]

I'm going to mark this issue as resolved (since we were able to get the image added to the Home-1 Section only); however, I've started a new thread to dig deeper into the other stuff: https://www.studiopress.community/topic/creating-image-container-for-typed-js-content/

Thanks so much!

[PrayersNApples]

Thank you so much! That is the closest I've come so far! I'll play around and return with a post if I'm able to make it work - thank you again!

If I could find a way to make it mobile responsive (so the image resizes exactly with the text, I'd be all set!)

[PrayersNApples]

Thanks, JChai - I tried out the plugin and just a step closer: The following code puts the image behind my text:

#text-5 { background:url(http://www.littleoneslittlewords.com/wp-content/uploads/2017/04/1313A.jpg); }

However, I'm still left with two problems:

1) I need more of the image to show (right now it's literally JUST behind the text - I need the full picture). I'm thinking maybe something to do with padding or line-height?

2) Since I'm using typed.js in this particular widget, the image shrinks and grows with the text as it's typed.

I also tried:

.home-widgets-1.color-section.widget-area {
  background-image: url("http://littleoneslittlewords.com/wp-content/uploads/2017/04/13A.jpg");
}

This solves the problem of showing more of the image; however, the width still grows and shrinks as the typed.js text is typed.

Any suggestions anyone might have would be greatly appreciated! Thanks so much!

[PrayersNApples]

Thanks, JChai! Once I've added the desired elements, am I able to delete the plugin and keep the changes (in other words: are the changes made directly to my css stylesheet - and the plugin is just a conduit) or will the changes disappear with the plugin? I'm trying to keep my site as bloat-free as possible, so I'm trying to limit my plugins - but this does seem like a great solution! If I can delete after implementing, this might be perfect.

(I'm currently using Firebug but can't isolate what line of code needs to be added where - I know I'm floating around the right area, but can't get it right.)

[PrayersNApples]

Hi Brad,

Thanks so much! I tried adding the following CSS but it didn't work (I'm thinking maybe I didn't identify the right class in my PHP code?):

home-widgets-1 color-section widget-area {
    width: 50%;
    min-height: 150px;
    position: relative;
    background: url('http://littleoneslittlewords.com/wp-content/uploads/2017/04/1313A.jpg') repeat;
}

(Also: Do you happen to know what size image would be optimal to upload?)

I really would like to recreate the effect found at http://www.stephanemartinw.com/ - just with a typewriter image as the background instead of a gray rectangle. The last link you suggested looks perfect! I'm just, unfortunately, not in a financial position to access the rest of the article.

Any advice would be greatly appreciated - thank you so, so much!

[PrayersNApples]

Under the Appearance Editor (Background), I have the "Preset" selected at "Fill Screen". The size up the uploaded image is 1600 x 1600.

[PrayersNApples]

Ok, sounds good - thank you! One last question: The link seems to just refer to the text on the second "enter your password" page. Any suggestions on changing the word "Protected" on the first (and second) pages? (See: http://prayersandapples.com/portfolio/ )?

Thanks!

[PrayersNApples]

Hi Christoph,

Thanks so much! Do you know if I should I paste this code into the functions.php of my Minimum Pro theme, or the Genesis functions folder?

[PrayersNApples]

(I found the WordPress instructions for creating a custom page template - which seems like what i need to do? - but, again, I'm not sure where I need to be uploading what?) It would be great if I could use this template for multiple pages (and select it as the page type when I'm drafting new posts) but I'm going to need to change the graphics on different pages, so not sure what the best way is to go about it?

Thanks again!

[PrayersNApples]

I've been trying to find a work around as best I can, as I know everybody is very busy - and I'm not very good with all this! 🙂 I went ahead and downloaded the following one page Bootstrap template to give my page the divisions/scrolling effect I wanted:

https://creativemarket.com/artlabs/9003-FLAPPSTER-Bootstrap-flat-landing

However, again, I don't want it to be my home page - just one of my other pages (i.e., "About" or "Me"). I don't know where to upload the files or copy/paste the information so that it only applies to one specific page - does anyone have any advice? I would really, really appreciate it!

Thank you so much! (And please let me know if I should start a new thread, as I realize my questions are evolving.)

Thanks again!

[PrayersNApples]

I just found this template that seems like it would do exactly what I need: https://creativemarket.com/artlabs/9003-FLAPPSTER-Bootstrap-flat-landing

It says it's a "bootstrap" landing page. Will this work with my minimum pro design on genesis? If so, this seems like it might be a good solution that won't involve a lot of coding.

Please let me know if anyone knows if this will work - thanks so much!

[PrayersNApples]

So sorry to bother everyone - but I've been experimenting with my css sheet and trying to search for answers online, but I still can't figure out how to change only specific sections of font, when they inherit their styling from the body. At this point, my main concern is changing the font color of my site description ("Database includes 400+ studies" in the tagline). It inherits its color, black, from the body text - and I don't want to change that. I just want to adjust the description to #368687 instead of #333. Any suggestions?

Thanks so much - and again, I'm really sorry to bother everyone!

[PrayersNApples]

Both solutions worked perfect! Thanks so much for your time and patience, I really appreciate it!

[PrayersNApples]

(all of the other pages, besides the homepage, show white underneath the footer area - I'd like to remove this as well)

[PrayersNApples]

I didn't realize I was copying/pasting the wrong link! Thank you so much - that worked 🙂 One more question though: the background image is still showing through after the bottom of the footer. Is there any way to delete that/get it to stop showing? You can see it here at: http://www.prayersandapples.com.

Thank you so much for your help! 🙂

[PrayersNApples]

Hi Davinder,

Thank you so much for your response! Unfortunately, I tried that and it didn't work - this is what my css looked like when I changed it:

/*
Footer Widgets
---------------------------------------------------------------------------------------------------- */

.footer-widgets {
	background: url(http://prayersandapples.com/?attachment_id=6185) repeat-x;
	color: #999;
}

.footer-widgets .wrap {
	border-bottom: 1px solid #444;
	padding: 40px 0 16px;
}

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
	width: 340px;
}

.footer-widgets-1 {
	margin-right: 60px;
}

.footer-widgets-1,
.footer-widgets-2 {
	float: left;
}

.footer-widgets-3 {
	float: right;
}

.footer-widgets a {
	border-bottom: 1px dotted #fff;
	color: #fff;
}

.footer-widgets a:hover {
	color: #999;
}

.footer-widgets .widget {
	margin-bottom: 40px;
}

.footer-widgets .widget-title {
	color: #fff;
}

.footer-widgets li {
	list-style-type: none;
	margin-bottom: 6px;
	word-wrap: break-word;
}

.footer-widgets .search-form input:focus {
	border: 1px solid #ddd;
}

/*
Site Footer
---------------------------------------------------------------------------------------------------- */

.site-footer {
	background: background: url(http://prayersandapples.com/?attachment_id=6185) repeat-x;
        letter-spacing: 1px;
	padding: 60px 0;
	text-align: center;
}

.site-footer a,
.site-footer p {
	color: #999;
}

.site-footer a:hover {
	color: #fff;
}

.site-footer a {
	border: none;
	font-weight: 300;
}

.site-footer p {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 14px;
	margin-bottom: 0;
}

/*

However, after making those changes, my homepage footer was clear (showing the bottom of the main background) and the footer on all other pages was white.

I have since returned it to its normal settings:

/*
Footer Widgets
---------------------------------------------------------------------------------------------------- */

.footer-widgets {
	background-color: #75bdb4:
	color: #999;
        clear: both;
}

.footer-widgets .wrap {
	border-bottom: 1px solid #444;
	padding: 40px 0 16px;
}

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
	width: 340px;
}

.footer-widgets-1 {
	margin-right: 60px;
}

.footer-widgets-1,
.footer-widgets-2 {
	float: left;
}

.footer-widgets-3 {
	float: right;
}

.footer-widgets a {
	border-bottom: 1px dotted #fff;
	color: #fff;
}

.footer-widgets a:hover {
	color: #999;
}

.footer-widgets .widget {
	margin-bottom: 40px;
}

.footer-widgets .widget-title {
	color: #fff;
}

.footer-widgets li {
	list-style-type: none;
	margin-bottom: 6px;
	word-wrap: break-word;
}

.footer-widgets .search-form input:focus {
	border: 1px solid #ddd;
}

/*
Site Footer
---------------------------------------------------------------------------------------------------- */

.site-footer {
	background-color: #75bdb4;
        letter-spacing: 1px;
	padding: 60px 0;
	text-align: center;
}

.site-footer a,
.site-footer p {
	color: #999;
}

.site-footer a:hover {
	color: #fff;
}

.site-footer a {
	border: none;
	font-weight: 300;
}

.site-footer p {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 14px;
	margin-bottom: 0;
}

(Note: the normal settings have a line that says "clear: both" under the site.footer section - I tried removing and keeping it; it doesn't seem to make a difference with the changes - the homepage is still clear and the others are white.)

Any other suggestions?

Thanks for your help!

[PrayersNApples]

(I've currently changed all headers to the new font, Lobster Two, but am still hoping to figure out how to change some without changing the others.)

[PrayersNApples]

@emasai: thank you for your suggestion! Unfortunately, I'm still not having too much luck :/ I was able to get the font to change - but something's not right, because it doesn't look the same as the Minimum Pro demo site. I followed the instructions on Brian Gardner's tutorial: http://www.studiopress.com/tips/google-web-fonts.htm but the font on my website looks smaller. (I've since changed it back because I was worried I was messing with too many things and needed to wait until someone told me how to do it correctly!) I tried to leave my question on that tutorial, but for some reason it won't let me? I also emailed support, but they said they don't have access to the exact coding I would need to copy/paste and suggested I ask for help on the forum.

If anyone could help me figure out how to get the main font on the Adorable theme to look exactly like the font on Minimum Pro, I would really appreciate it! Thanks so much!

[Author]

Posts