[Riavon]

That line is generated by an image here:

.home #wrap #inner {

background-image: url("images/home-inner.png");
background-repeat: repeat-y;

}

To get rid of it, just change that to background-image:none and delete the background-repeat-y (not needed)

To move it you can position it to stay lined up with your content at any width if you add the style to the

.content-sidebar #content, .sidebar-content #content

like so:

.content-sidebar #content, .sidebar-content #content {

width: 640px;
background-image: url("images/home-inner.png");
background-repeat: repeat-y;

}

---

Twitter: @riavonentprises

[Riavon]

You would do that in your style.css This isn't something that's built into the theme's functionality. Any customizations you want to do along the lines of what you're talking about require a basic working knowledge of CSS.

---

Twitter: @riavonentprises

[Riavon]

Hi, I don't have the Minimum theme but I am certain this is the same, look for p#description in your style.css and you can alter that to style your tagline. Be sure you've entered tagline text under Settings/General of course.

As far as hiding it on some pages and not on others (not sure why you'd want to do that?) this is not a functionality that is built into Genesis or the child theme, simply because it's best practice to keep your header consistent across all pages of your site. If you want to do that anyway, you'd most likely have to set up custom page templates and/or body classes in which the p#description is display:none;

 

---

Twitter: @riavonentprises

[Riavon]

You can add it as a background image then include  background-position:bottom;  to the sidebar style.

---

Twitter: @riavonentprises

[Riavon]

Hi, I don't know what changes to the size of the image you've been making? But the image that I see there now, the dimensions are 400px (wide) x 130px (high). The header image needs to be 960px wide. If you load something that is narrower, then naturally it's not going to take up the entire width of your header area.

---

Twitter: @riavonentprises

[Riavon]

Hi, the color is generated by this:

.content-sidebar #sidebar .widget, .sidebar-content #sidebar .widget, #footer, #header {

    background: none repeat scroll 0 0 #222222;

}

on line 1547 of your style sheet. Simply change that #222222 to your pink color or transparent.

---

Twitter: @riavonentprises

[Riavon]

Oh cool, I really like that effect. I did that same thing on one of my client sites ( lakefestnc dot com ) and just so happens I built that one using my own child theme, too! It was my first child theme, and I remember wanting to learn how to do that CSS ribbon effect! 🙂 Anyway... you can look at how that site is coded, if you want. I followed the css tutorials I found on the subject and utilized the CSS :after pseudo-element to do the ribbons. I'll see if I can find the tutorial for you so you can learn, too.

In case anyone is interested in learning how to make a ribbon effect using simple CSS, > HERE <  is the link I mentioned above. CSS Tricks is an amazing resource for CSS, by the way.

Vic, good luck finding your echo. 🙂

---

Twitter: @riavonentprises

[Riavon]

It would be helpful to know what theme you're using and/or a link to your site so we can take a look. I don't know what it is you intend to do with your h2 wrap, but if you just want to add style to a particular header, such as the post titles, just look in your stylesheet (style.css) you can find h1.entry-title { which will style your post titles. Just apply the style you want to the element you want. Also, you can consider using the Genesis Simple Hooks plugin to add your own code to the theme, as well. I hope this is helpful to you.

 

PS - Note to mods, this post needs to be in the "Design tips and tricks" area rather than in the Forum Bugs and Suggestions area. Not sure if you have the power to move it or not? ~ Ria

---

Twitter: @riavonentprises

[Riavon]

Did you clear your browser cache and reload? I assure you, it will make a change. 🙂 Also be sure that you've actually saved your changes (I forget to do that sometimes and wonder why the heck it's not working!) 🙂

I've got to sign off for the night, and go do Christmas Eve. I'll check back in after the holiday festivities.

---

Twitter: @riavonentprises

[Riavon]

Ha, well by "my" theme I meant it's my favorite and/or the one I'm most experienced customizing. 🙂 Yes, that is the correct code to modify. What is the width you wish to increase the size to? Remember that it's got quite a bit of right-side padding, and that any increase in the width of this section may require adjustments to the widths of your sidebars. Meaning that you may need to decrease the right-side padding a bit in order to widen it.

Try this:

.content-sidebar-sidebar #content {
border-left: medium none;
padding: 25px 20px 30px 0;
width: 680px;
}

---

Twitter: @riavonentprises

[Riavon]

You should be able do the widths on the sidebars the way you indicated above that you want:

#sidebar-alt {
padding: 25px 0 0;
width: 180px;
}

.sidebar {
display: inline;
float: right;
font-size: 14px;
padding: 25px 0 0;
width: 220px;
}

But once the width of the browser window/viewing area is reduced, it will push one sidebar beneath the other because this theme is designed to be responsive.

I've got a lot of experience customizing the Eleven40 theme, for several different client sites as well as my own website. I have a standard process for converting the content area and sidebar widths to percentages with max- and min-width settings in pixels just to ensure it renders well at almost every browser width/screen resolution combination.

Let me know if I can help you, as this is "my" theme! 🙂

---

Twitter: @riavonentprises

[Riavon]

You should be able to achieve the display of the two capitalized letters in your site title by typing it in that way under your General settings in your WP Dashboard.

Just change the text-transform:uppercase; to text-transform:none; it will render the title however you typed it in your General settings "Site Title" area.

---

Twitter: @riavonentprises

[Riavon]

There must be an issue with absolute positioning for Android. I can only guess at this point that perhaps a browser detect script of some kind that either hides the footer or positions it in a different way for Android could possibly be a solution.

---

Twitter: @riavonentprises

[Riavon]

In style.css on line 199 #title {

change

text-transform:uppercase;

to

text-transform:none;

To make other changes to your texts, you can make additional changes to your  stylesheet (style.css)

Here is a link to a decent tutorial on how to use Google fonts on your Genesis theme.

To change the appearance of your site title you change/add to the

#title a, #title a:hover, #description {
font-family: ______________________
font-size: __em
color:#____
}

at line 50 in your style.css

---

Twitter: @riavonentprises

[Riavon]

Then you need to edit your style.css to size and position your page elements as percentages and ems rather than fixed widths (i.e. 1140px) and px. Bear in mind that this can potentially make some menu items and other text difficult to read.

---

Twitter: @riavonentprises

[Riavon]

Typically you can change these via your style.css Do you have a site link that you can share with us?

---

Twitter: @riavonentprises

[Riavon]

Ugh! This is a screenshot what it's testing for me.

What text is the footer covering? Is there any way you can share screenshots of what's happening?

---

Twitter: @riavonentprises

[Riavon]

Thanks! Ok, I've taken some time to examine your site. Sorry I can't be more help, but I don't have the Stretch theme, so only after digging through your site's source code I realized that it seems that bg image (of the little girl) is generated by a script in the theme itself, rather than by your main stylesheet CSS.

<script type='text/javascript'>
/* <![CDATA[ */
var BackStretchImg = {"src":"http:\/\/mediacreationsgroup.com\/wptraining\/wp-content\/uploads\/2007\/03\/MP900402059.jpg"};
/* ]]> */
</script>

So, I'm a bit at a loss how to shrink that image down to fit smartphone screens unless you do some work in the CSS (along the lines of what I posted above) pertaining to that script.

I did notice that your content area (the "About" text block) gets rather "squished" at phone width, and this can be easily remedied if you do the following to your style.css

In your style sheet at line 1490 under your

/* iPhones (portrait and landscape) ----------- */

@media only screen and (max-width: 480px)

Add this:

#content-sidebar-wrap {
float: left;
width: 100%;
}

Make sure you add this within the open/close brackets for the @media styles.

As far as the footer, in my experience the Genesis child themes will push that footer down once content is added to the pages. If you don't intend to add much content to the pages then you can try adding this to your style.css in the #footer div

position:absolute;
width:100%;
bottom:0;

So it would be:

#footer {
background-color: #111;
clear: both;
overflow: hidden;
padding: 24px 0;
padding: 1.5rem 0;
text-align: center;
position:absolute;
width:100%;
bottom:0;
}

---

Twitter: @riavonentprises

[Riavon]

I'm confused. You don't want the site to be responsive, and removed the responsive code, yet you don't understand why you can't see the full width of the content on your ipad? The responsive code is what makes the site render correctly on mobile devices.

---

Twitter: @riavonentprises

[Riavon]

Hi Anita, I can't see your site link because it requires a login, but I use the following when I want a responsive background. Maybe this is something that can help you?

/* Scaled BG image style source: http://css-tricks.com/3458-perfect-full-page-background-image/ */

html, body {
background: url(images/bg.jpg) no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;

/* Set up proportionate scaling */
width: 100%;
height: auto;

/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px;   /* 50% */
}
}

/* End scaled bg img style -------------------------------- */

---

Twitter: @riavonentprises

[Author]

Posts