Modifying Design

  • samidmatt

    (@samidmatt)


    11 years, 11 months ago

    Hi, I have a question:

    1- Let’s say I want to change the design, how could I do this? For example, if I use the firebug addon, I see that a particular rectangle – which is the header – has this class: fwidgets. This particular rectangle basically looks like an image, which serves as the header for every page.

    This is what I don’t understand, how could I actually replace it? I know how to make it so it’s invisible, but if I wanted to add an actual image, and thus create a real design, how could I do that? And I don’t mean adding the image itself as a background image via the fwidgets class. But rather, adding a brand new one.

    I know how to incorporate anything via the pages and all, using HTML/CSS/JS etc.. But, actually adding design to the theme itself, I have no clue.

Viewing 13 replies - 1 through 13 (of 13 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 11 months ago

    Have you read about Child Themes: http://codex.wordpress.org/Child_Themes ?

    Thread Starter samidmatt

    (@samidmatt)

    11 years, 11 months ago

    Yes. The theme I have is a child theme, which I want to be able to modify so I can practice creating/modifying WP sites.

    That link doesn’t explain what I’m looking to do. It allowed me to create a child theme and make some mods, but not what I wrote in my OP.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 11 months ago

    Okay so you want to replace an image that’s referenced in CSS. To do this create an images folder in your Child Theme if it’s not there already, then put your image (that you want to replace) in there, and then you can reference that image in your Child Theme style.css file by overriding the current style.

    Thread Starter samidmatt

    (@samidmatt)

    11 years, 11 months ago

    I don’t want to replace an image. I want to ADD an image. I can easily use CSS to “remove” the coloured rectangle (which is what it is for now). But, adding an image is where I’m lost. Normally this would be very easy using HTML while hardcoding it. But using WP to do it, I’m having trouble doing that.

    EDIT: I realize I could probably add an image as background in the class, but I don’t want to do that. I want to be able to add multiple images if need be.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 11 months ago

    It’s not clear what exactly your problem is, what is stopping you from adding an image?

    Thread Starter samidmatt

    (@samidmatt)

    11 years, 11 months ago

    I created one, yes.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 11 months ago

    EDIT: I realize I could probably add an image as background in the class, but I don’t want to do that. I want to be able to add multiple images if need be.

    You need to link to a specific example of this then, I can’t generalise an answer for you.

    Thread Starter samidmatt

    (@samidmatt)

    11 years, 11 months ago

    Ok, say this theme: http://demo.fabthemes.com/revera/

    Imagine replacing the colour background and adding an image there.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 11 months ago

    Why wouldn’t your CSS work:

    .fwidgets {
 background: url("images/your-image.png");
}

    ?

    Thread Starter samidmatt

    (@samidmatt)

    11 years, 11 months ago

    I don’t want to use CSS to modify this. I am talking about adding multiple images. Adding one as background image is one thing, but adding new ones, such as specific shapes, elegant borders etc. cannot be added via that method.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 11 months ago

    Oh okay, so this will be specific to how your theme is set up. Which theme are you using?

    If your theme doesn’t encompass for that then you could create your own “background image” custom field in the dashboard, using some relevant plugin, and then pull that image out into your HTML. For example:

    <?php
// Pseudo code
$background_image = get_custom_field('background_image');
if ($backround_image) {
    $style = "background: url(' . $background_image . ')";
}
?>
<div style="<?php echo $style ?>"> ... </div>

    Thread Starter samidmatt

    (@samidmatt)

    11 years, 11 months ago

    When you speak about placing a div somewhere, this would imply placing HTML coding inside a “post” or “page”. But, I’m not trying to do this. I’d like to be able input my own design, and thus add some images and what not within the child-theme. I don’t want to deal with WP from the admin area.

    Unless you mean placing it in a specific WP .php page, I wouldn’t know which one you’re referring to.

    Thread Starter samidmatt

    (@samidmatt)

    11 years, 11 months ago

    I was able to use the following in a new header.php in the child-theme:

    <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/image.jpg" />

    Though I am very interested in understanding more what you are trying to say. Perhaps I could play with your code, if only I had more information about what you wanted me to do with it.

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘Modifying Design’ is closed to new replies.