Hi Éliane,

I’m happy to hear the theme has proved useful to you all this time

You will have to edit the image sprites for the theme to change the icon color. Open the provided `sprite.psd` in Photoshop. The menu icon should be the third one on the second row. Change its color to black or something dark. Hide the background layer, and using the “Save for Web” command, export the sprite as a PNG image with transparency. Do the same for the hires sprite (sprite@2x.psd).

Once you have exported the PNGs you need to upload them on the customizer using the fields “Sprite” and “Sprite Hires”.

I noticed your logo is a little on the long side and is pushing the menu underneath the header on tablets. When the logo is displayed as text it shows the blog title. If you want to keep the blog title as it is and shorten your logo, find the following code, on line 1108 or so:

<span class="logo_text">{Title}</span>

and change it to this:

<span class="logo_text">Éliane Prégent</span>

If you encounter any problems send me a message using the form on my profile page.

Cheers!

Sergio

Thank you for everything! That works perfectly.

Glad to hear that! Cheers!

You’re welcome, thanks for your purchase!

The theme has two dropdown menus, one for the tags (the one you’re using) and another one for pages you create on the customizer.

The easier way to add a second dropdown would be to create as many pages as you need, and if you want them to take you to ‘tagged’ results, you can use the Redirect feature to make them point to the right tag page. For example, create a page pointing to

http://mexdragoon.tumblr.com/design

that redirects to

http://mexdragoon.tumblr.com/tagged/design

More about using pages here: http://www.tumblr.com/docs/en/pages

Then make sure “Enable Pages Dropdown” is enabled.

The other option would be to manually insert the code for an extra menu into the theme markup. This is the HTML structure you should use for a dropdown menu:

<li class="has_submenu"><a href="javascript:;">Your Label <i class="icon-plus-alt"></i></a>
    <ul class="navi_dropdown">
        <li><a href="/tagged/whatever">whatever</a></li>
        <li><a href="/tagged/whatever">whatever</a></li>
        <li><a href="/tagged/whatever">whatever</a></li>
        <li><a href="/tagged/whatever">whatever</a></li>
    </ul>
</li>

The ‘href’ attributes don’t have to be ‘tagged’ pages necessarily, and you can use relative or absolute paths. You could insert you code on a new line after {/block:IfEnablePagesDropdown}{/block:HasPages} on line 1169.

Let me know if that helps!

Hi Arron,

Glad to hear the background images worked fine, looking good

The issue seems to be that the Lato font you assigned to the navigation isn’t being loaded. I think you entered “lato” (all lowercase), make sure the Navigation Font Family reads “Lato” (capitalized).

Please let me know if that helps!

Although I gave you a 5/5 star rating, I’d love to be able to send something over too. You need to open up that tip jar! Even if it’s just a Paypal “donate” link, it could really go a long way haha.

Hey there,

1) Paste the contents of this bin above the <footer class=”post_meta”> tag, Is basically what you have above without the title and date, with an extra class.

http://pastebin.com/yLM9jeBi

The title gets duplicated because is injected via JavaScript (is a fake title after all), but it can be hidden. Add this to your Custom CSS:

.post_details.hide_title .project_title {
    display: none;
}

I also notice the reblog button still behaves a little weird up there. This should tame it:

.portfolio_single .post_details .reblog_button:hover {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

2) Placing floating banners would be hard because the content width changes depending on the screen size or device.

3) If I understand correctly, you want to make the light blue background clickable. I think it would be possible to put a giant clickable banner behind the post content, something like this site: http://www.kvraudio.com. Some changes to the layout will be needed in order to click through the banner, and it would only be shown on large screens, when there’s enough room on the sides and the content width is fixed. Let me know if something like that would work for you.

Thanks for the rating and positive review! If you want to send something my way, please get in touch via the form on my profile page.

Cheers!

Hey there,

Sometimes I use https://imgur.com/ to host my images, seems to be fast. Make sure the images are optimized for the web and the file size is as low as possible.

Assuming the header and footer should have a tiled image applied, you can use the following:

/* Header Bg */
#site_header .inner {
    background: url(http://path/to/my/hosted/image);
}

/* Footer Bg */
#outgoing .inner,
#content_info .inner {
    background: url(http://path/to/my/hosted/image);
}

/* Get back the gradient */
#outgoing_links {
    background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.13)));
    background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.13));
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.13));
    background-position: bottom;
    background-repeat: no-repeat;
    -webkit-background-size: 100% 25px;
    background-size: 100% 25px;
}

For the body background, you can play with the `background-size` property to see what works best (cover, contain, auto):

/* Body Bg */
body {
    background-image: url(http://path/to/my/hosted/image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

I hope that helps!

Awesome, I’ll start fiddling with those, I’m assuming those are all to go in the ‘custom css’ section? Also, how would I do a non-tiled header? Would a .tiff with transparent sections work to show the background underneath? I imagine not but I had to ask.

Yes, “Advanced options > Add Custom CSS”.

For a non-tiled header you want to use `background-repeat: no-repeat;` and set `background-size` to `auto` or `cover`, depending on what you want to achieve.

A TIFF image will be way too heavy. Export your image as a PNG with transparency (Use the “Save for Web” command in Photoshop). You can additionally run it through http://optimizilla.com/ to compress it even further.

Cheers!

If you have a tip jar somewhere, I’ll be more than happy to throw in for all of the wonderful help you’ve been giving! =)

Actually, I was able to figure this thing out:

Buuuuut the “reblog” button shrinks every time you highlight it. Is there anything I can do to make it so it doesn’t shrink?

Did you just duplicated the code (for the title, date, buttons, etc.) at the top? The button behaves like that because you have the block

<section class="post_details"> ... </section>

inside of

<section class="post_content"> ... </section>

...not its intended parent. Try moving it out and above that block instead, so you will have:

<section class="post_details"> your duplicated title, date, buttons... </section>
<section class="post_content"> the post content... </section>

No need to wrap the code on the extra <div> either. That will fix the issues with the paddings/margins as well.

Never thought about setting up a tip jar, good one!. If you want to return the favor, just head to your “Downloads” tab and rate the item 5 stars

Let me know if the above helps!

Sergio

Haha yes and no.

It’s simple enough to add in and get uploaded! Buuuuut, by doing so, I can’t use the “Body Background” color option anymore.

I guess it’d be better if I further explain what I was trying to do: - I wanted to keep the “body background” color option enabled, so I could change it to whatever I want, whenever I want. - I thought I could have a no-repeating and centered “white” background that’d lay on top of the “body background” color. It’d be the same size as the max-width of the footer, so the “body” (what all the text and pictures and stuff lays on top of) would have a white background.

Does that make sense?

Haha sorry for bugging ya again.

Actually, this might be easier to for me to explain:

Is there just a simple way to make the body white and have a custom background image behind that?

There. Haha I think I explained that the best way possible.

I think I got it

Use the `Body Background` option to set the color for the main background, and then change the background color of the content with some Custom CSS; for example:

#portfolio_index,
.portfolio_single,
.no_slider #portfolio_index,
.no_slider .portfolio_single {
    margin: 0;
    padding: 0
}

#portfolio_index .inner,
.portfolio_single .inner {
    padding: 40px 0;
    background: #fff;
}

If you don’t want it on the homepage, just remove the lines referencing `#portfolio_index`.

Hope that works as intended!

Hi John,

Unfortunately, the option created some issues with photosets, the images were not rendered consistently in many cases.

Now you can limit the width of the photoset as a whole, so if your images aren’t wider than 700px, for example, you can enter `700` for the option Photoset Max Width.

If you want to target only specific sets, you can do so with Custom CSS using the photosets IDs, for example:

#photoset_85865878786,
#photoset_85865878787 {
    max-width: 700px;
    margin: 0 auto;
}

You can grab the numerical portion of each ID from the post URL.

I hope that helps!

Sergio

Thanks, Sergio! Admittedly, that’s a little disappointing, as I liked the way the feature worked in the older version – that being said, if it didn’t work consistently, I completely understand why it was nixed.

Thanks again for your help!

Yeah, it depended on the way the images were arranged on the set and their size. I think most people didn’t have issues, but for some photosets looked wrong, so I thought it would be more consistent to limit the width of the entire photoset.

I’ll look into bringing back the old behavior, if possible, but that would probably require redoing the whole logic behind the photosets script.

Cheers,

Sergio

Hi there!

I’m not really sure what you mean. Do you want to get rid of text posts on the grid completely?

The latest update has options to display text posts the same way as photo posts. You have to insert a custom thumbnail image and use a special tag on the post. Have you tried that?

Regards,

Sergio

Hi!

Thanks for the kind words, I’m glad you’re happy with the update

That happens to me as well, I assume is a glitch on Tumblr’s dashboard. Tumblr doesn’t seem to like that variable, is the only one that keeps resetting itself, but there’s nothing that sets it apart from the others.

If I find a solution i’ll let you know, but for now you’ll have to paste the text widget contents back in.

Regards,

Sergio

ohh, i see thank you so much for always helping!~

Thanks! I’m glad you like the new options. It’s a little tricky, but if you add the following to your Custom CSS you should have the link icons back:

.portfolio_item.is_link .thumbnail::before {
    content: '';
    display: block !important;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 1px;
    left: 1px;
    background: url(http://static.tumblr.com/64npwmb/qRWnbdy8y/sprite.min.png) -300px -400px no-repeat;
    opacity: 0.4;
}

Let me know if that works for you,

Sergio

Thank you so much, it worked

Forgive me—haha I guess there could’ve been a better way of explaining things.

Using the above “quick test page” as a reference, I made put together this visual to display what I’m referring to:

Does that help? Long story short, I’d just like some consistency in the page size for photosets. Option #1 would be beyond perfect. Any help is greatly appreciated! =)

Hi there!

You can do that already. I guess when you created the post and dragged the images, they got arranged like that by default—but you can go back to your dashboard, edit your post and arrange them however you please. If you drag the images around you can place them in stacked order or a different grid configuration. Am I missing something else?

And if you feel your images get too wide, you can use the option Photoset Max Width to limit the width of photosets to something like 700, for example.

Best,

Sergio

Derp. Haha that’s what I get for never really using Tumblr before.

Thank you so so so much!

Hi there!

Looks like she made several customizations to the theme. You could achieve similar results with some custom CSS. Try pasting the following into the “Add Custom CSS” box, on the advanced section of the customizer:

#content_info .widget_about .blogger_portrait {
    width: auto !important;
    max-width: 200px;
}

#content_info .widget_about .image_frame {
    margin-left: 0;
    padding: 0;
}

The `max-width` rule is to prevent the image from getting too big. Let me know if that helps!

It worked perfectly! Thanks

No problem!

Hi there!

I think the problem is that you uploaded your logo on the Sprite image field on the customizer. If you updated from an older version of the theme, the simpler way to solve the issue would be to find the Sprite and Sprite Hires image fields on the customizer and select “Remove”, so that the theme uses the default and updated icon sprites.

Please let me know if this fixes the issue

Hi Kylie,

I’m glad to hear you’re enjoying the theme. Nice illustrations!

Looks like she’s using something called “Etsy Mini”:

https://www.etsy.com/help/article/216

So, you should build your own Etsy Mini and then manually paste the code on the site footer, above the “About Me” title.

Keep in mind that the Etsy widget is not responsive—it has a fixed width—so it will not look good on tablets and phones, unless you make it only three columns wide. Also, it looks like you can’t customize it at all, and has a white background, so I don’t know how good it will look against the dark background of you site.

Kind regards,

Sergio

Hey there

1) You can hide the Twitter widget with some custom CSS. Add the following to the “Add Custom CSS” box on the advanced section of the customizer:

/* Hide tweets */
#tweets {
    display: none !important;
}

If you want to go all the way, you can remove the code between the tags {block:Twitter}{/block:Twitter} beginning on line 2273. That will prevent the Twitter code form executing.

2) The following snippet worked to center the navigation for me, but it may not work depending on the length of your menu or logo size, give it a try:

/* Center navigation */
@media screen and (min-width: 58.75em) {
    #menu_bar {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
    }

    .navi_dropdown {
        text-align: left;
    }
}

3) Centering the individual lines on each slide is not possible, because the animation is scripted, but you could center the whole heading group as a whole:

/* Center slides headings */
#top_banner .overlay .inner {
    text-align: center;
}

4) You’re right there, will fix. In the meantime, use this:

/* Fix logo on hover */
#logo_link a:hover {
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

5) I will consider adding that as an option for the next update. If you want a quick and dirty way to have a block of text below the slider now, you can insert the code manually between the tags <div class="inner portfolio_inner"> and <div class="grid_wrap clearfix">, lines 1327 and 1328.

Take a look at this for example, the text block is inside the <div> with the “hero” ID:

http://pastebin.com/ueu3mVa8

Change the heading and paragraph text as needed, then add the following custom CSS to style it, adjust link colors and margins to taste:

/* Custom hero styles - adjust to taste */
#hero {
    max-width: 800px;
    margin: 80px auto 100px auto;
    text-align: center;
}

#hero h3 span {
    font-size: 85%;
}

#hero a {
    color: #00c4f5;
    border-bottom: 1px solid #00c4f5;
}

#hero a:hover {
    color: #333;
    border-color: #333;
}

I have these changes done on this dummy test site: http://pixelmoxie-supple-theme.tumblr.com

I’ll keep them there for a couple of days so you can reference them. The entire custom CSS looks like this: http://pastebin.com/e76hXtBr

Let me know if that helps!

This is a tremendous help. You’re fantastic, thank you!

Hi there,

The retina or hires logo will adopt the same dimensions as the regular logo, but it will have a higher pixel density. When you export the image, it should be twice as big a the regular logo, and always export it using the Save For Web command, as a PNG with transparency. The resolution should always be 72dpi.

What’s your regular logo width in pixels? I just tested a really wide logo, and it seems that the width shouldn’t exceed 230-240px to fit comfortably on an iPhone in portrait mode. Either way, I recommend the logo isn’t wider than that even for desktop screens. Remember we’re talking about the regular logo, the retina logo will take its dimensions.

If you go to the “Advanced options” section on the customizer, you could paste the following on the “Add Custom CSS” box:

@media (max-device-width : 480px) {
    #logo_link img {
      max-width: 230px;
      height: auto !important;
    }
}

That should limit the width of your logo to 230px on phones. You may need to tweak that depending on your logo but it worked well for me.

Let me know if that helps!

Hi Ricardo,

I’m not sure I follow. do you want to move the border underneath the slider to the top? If so, add this to your custom CSS, replacing the border color as needed:

#top_banner {
    border-top: 4px solid #00c4f5;
    border-bottom: none;
}

Let me know if that helps!

You’re welcome! Thanks for the kind words.

anyway~ i would love to suggest a image thumbnail option for text type posts on your next update i hope it’s possible ^_

I’ll keep it in mind, although I can’t say when the next update is going to be.

You’re right, thanks for the heads up. Please find the script tag on line 2185:

<script src="http://static.tumblr.com/64npwmb/ojdn83mwc/main.min.js"></script>

and replace it with:

<script src="http://static.tumblr.com/64npwmb/1yun9vgnd/main.min.js"></script>

Let me know if that works, thanks!

I tested and this solve the problem, everything works now.

Thanks Sergio.

Cheers. Ricardo

You’re welcome Ricardo

I’ll submit an update soon so the fix is available for everyone.