Set content box transparent

  • Author
    Posts
  • #1389020

    @winfurtnerp, the brace in line 15 closes the “.flexslider” CSS rule. You are missing a closing brace for the “#home-widgets” CSS rule, right below line 11.

    Until now I found no way to integrate a interactive google maps section. Google only offers the iframe-code… Do you know how to do it?

    You can just paste this iframe code into your Text editor, and then publish your post as usual. Here are some instructions on how embed a Google Map into your blog: http://en.support.wordpress.com/google-maps/

    #1389021

    You were right! Now I got it! Only thing: The forwarding-button of the slider is still white…. Any idea on that?

    Didn’t know iframe is accepted now. Few months ago this wasn’t possible. Ok, great. Thanks.

    #1389029
    .featured h2 {
        background: rgb(255, 255, 255);
        background: rgba(255, 255, 255, 0.1);
    }

    Again, you can replace “0.1” with any value between 0 and 1 (zero being fully transparent and one being fully opaque).

    I left a light background, because I feel it helps identify that is a clickable area. But, if you want it to be fully transparent, you can try the following CSS:

    .featured h2, .featured .hentry {
        background: none;
    }
    #1389030

    Great! Buttons transparent now.

    Yes, thanks for reminding. But I like it as you determined it. Now I even have a double layer transparency. Awesome for me.

    Can I also influence galleries? For example I want this one being transparent in background instead of black: http://pwdesigns.de/referenzen/referenzen-logos-und-keyvisuals/

    #1389032

    Ah and one more: If I want that the menu buttons glow up slowly to white background color instead of immedeately, is there a way to do that?

    #1389043

    Can I also influence galleries? For example I want this one being transparent in background instead of black: http://pwdesigns.de/referenzen/referenzen-logos-und-keyvisuals/

    Here goes a CSS tip: To change the looks of an HTML element in your page, you need to target it with CSS a selector. A lot of times, a selector will be the id of the HTML element you want to change, or a class that is being applied to it (through the “class” attribute in the HTML). For example, if you take a look at the source code of your page, you will see that the slideshow container is a <div> tag with the class “slideshow-window”. Because of that, to remove the background in your slideshow, you can use the following CSS;

    div.slideshow-window {
        background: none;
        border: none;
    }

    This will target <div> tags with the “slideshow-window” class applied to them, remove its background and border. A lot of times, targeting an element through its id or through a class applied to it is enough to get you going.

    A good way to figure these things out is to use your browser’s developer tools. For example, in Firefox, right click any element you want to change in your page, and select the option “Inspect Element”. This will open a panel showing the HTML for the element you clicked, and, on the right, all CSS rules being applied to it. Here is a good post on how to use your browser’s developer tools and find CSS selectors: https://dailypost.wordpress.com/2013/07/25/css-selectors/.

    #1389045

    Ah and one more: If I want that the menu buttons glow up slowly to white background color instead of immedeately, is there a way to do that?

    Again, if you use your browser’s developer tools like I mentioned before, you’ll see, on the right, that your menu items have a CSS rule called “.wf-active .navigation-main a” applied to them. You can use that same rule to apply a CSS transition to your menu items:

    .wf-active .navigation-main a {
        transition: 1000ms;
    }

    You can make the transition longer or shorter by tweaking the “1000ms” value. The transition property takes a number of parameters to customize the way your element transitions from a state to another. See http://css-tricks.com/almanac/properties/t/transition/ for more details on how CSS transitions work!

    Hope that helps :)

    #1389054

    Great!!!! Again: you are awesome! You provided me so much help. Can’t believe it. Please let me know if I can give back in a way. Maybe you need a logo? Let me know!

    #1389068

    Cool! I’m glad your website turned out the way you wanted :)

    #1389072

    Could you tell me how to make the sub-menupoints also appearing slowly in transition?

    By the way could you recommend a list or a collection of all those css-codes? That I can learn for myself and try different things?

    #1389081

    Hey again :)

    Could you tell me how to make the sub-menupoints also appearing slowly in transition?

    I believe the way the menus show up is defined through JavaScript, which, for security reasons, WordPress.com users are not allowed to post or change.

    By the way could you recommend a list or a collection of all those css-codes? That I can learn for myself and try different things?

    The support documentation lists a number of great resources to get started with CSS: http://en.support.wordpress.com/custom-design/editing-css/#css-help. Please, let me know if you have any questions!

    Hope you’ll find it fun to learn CSS and tinker with the styles in your site :D

    #1389082

    drlinde
    Member

    Oh ok, Nevertheless: Thanks again!

    #1389123

    Can I also outsourCe the full css code i have now? To improve the loading speed. Seems that after I added all the codes the website is loading slower.

    #1389149

    @paswein, your site will always load the fastest if your browser does not have to go to other places to get files for your pages. I see only a single rule in your CSS so that would not be causing any sort of issue.

    I ran your site through Pingdom’s Website Speed Test and the main page loaded in just over 1/2 second, and Webseiten page, which has a lot of images loaded in just over 3 seconds, which is exceedingly fast for an image heavy page. If you are experiencing slow loading times, it could be your internet service provider, or other issues on the web between you and the WordPress.com servers. You can test your internet connection speed at http://speedtest.com as well as many other places on the internet.

    Let us know if you are still experiencing problems.

    #1389150

    @paswein, I forgot to mention that the CSS you have hides the footer credits on the theme, and the footer credits have to remain on the themes and visible. From the WordPress.com Terms of Service:

    11. Attribution. Automattic reserves the right to display attribution links such as ‘Blog at WordPress.com,’ theme author, and font attribution in your blog footer or toolbar. Footer credits and the WordPress.com toolbar may not be altered or removed regardless of upgrades purchased.

    #1389151

    Thanks! Seems to be a problem with my DSL…

    Does anyone know the CSS-Code for removing the mouse-over permalink-popup at the featured sliders (Theme = Stay)? See here:
    http://thewesternview.files.wordpress.com/2013/08/unbenannt-21.jpg

    #1389152

    Another question: Until now I found no solution to integrate a valid FAVICON. blavatar or gravatar is not the solution. Any suggestions. Normally this is done through the header/css. But how to gain access to it?

    #1389153

    Hello again,

    You can add a favicon in the Settings → General Settings page in your dashboard, under “Blog Picture / Icon”. See http://en.support.wordpress.com/settings/general-settings/#blog-picture for more information :)

    #1389155

    drlinde
    Member

    Already did that, but has no effect on the favicon. Only changes the wordpress intern icon in the edit mode. See: http://pwdesigns.de/
    Still without favicon

    #1389156

    Already did that, but has no effect on the favicon. Only changes the wordpress intern icon in the edit mode. See: http://pwdesigns.de/
    Still without favicon

The topic ‘Set content box transparent’ is closed to new replies.