Viewing 30 results - 141,181 through 141,210 (of 142,510 total)
  • Author
    Search Results
  • #126098

    I tried to create my own progress bars by customizing this tutorial: http://www.red-team-design.com/stylish-css3-progress-bars

    using this in my custom.css:

    .progress-bar {

    background-color: #fcfcfc;

    height: 25px;

    padding: 1px;

    width: 100%;

    margin: 5px 0;

    -moz-border-radius: 2px;

    -webkit-border-radius: 2px;

    border-radius: 2px;

    -moz-box-shadow: 0 1px 5px #e1e1e1 inset, 0 1px 0 #f4f4f4;

    -webkit-box-shadow: 0 1px 5px #e1e1e1 inset, 0 1px 0 #f4f4f4;

    box-shadow: 0 1px 5px #e1e1e1 inset, 0 1px 0 #f4f4f4;

    }

    .progress-bar span {

    display: inline-block;

    height: 100%;

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    border-radius: 3px;

    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;

    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;

    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;

    -webkit-transition: width .4s ease-in-out;

    -moz-transition: width .4s ease-in-out;

    -ms-transition: width .4s ease-in-out;

    -o-transition: width .4s ease-in-out;

    transition: width .4s ease-in-out;

    }

    .blue span {

    background-color: #00b6f1;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#00b6f1), to(#058ff2));

    background-image: -webkit-linear-gradient(top, #00b6f1, #058ff2);

    background-image: -moz-linear-gradient(top, #00b6f1, #058ff2);

    background-image: -ms-linear-gradient(top, #00b6f1, #058ff2);

    background-image: -o-linear-gradient(top, #00b6f1, #058ff2);

    background-image: linear-gradient(top, #00b6f1, #058ff2);

    }

    .orange span {

    background-color: #fecf23;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#fecf23), to(#fd9215));

    background-image: -webkit-linear-gradient(top, #fecf23, #fd9215);

    background-image: -moz-linear-gradient(top, #fecf23, #fd9215);

    background-image: -ms-linear-gradient(top, #fecf23, #fd9215);

    background-image: -o-linear-gradient(top, #fecf23, #fd9215);

    background-image: linear-gradient(top, #fecf23, #fd9215);

    }

    .green span {

    background-color: #a5df41;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#a5df41), to(#4ca916));

    background-image: -webkit-linear-gradient(top, #a5df41, #4ca916);

    background-image: -moz-linear-gradient(top, #a5df41, #4ca916);

    background-image: -ms-linear-gradient(top, #a5df41, #4ca916);

    background-image: -o-linear-gradient(top, #a5df41, #4ca916);

    background-image: linear-gradient(top, #a5df41, #4ca916);

    }

    and this, to call a bar inside e.g. a text-element:

    <div class="progress-bar blue">

    <span style="width: 40%"></span>

    </div>

    <div class="progress-bar green">

    <span style="width: 60%"></span>

    </div>

    <div class="progress-bar orange">

    <span style="width: 80%"></span>

    </div>

    Works great on any device tested so far. Also I would suggest to create a Shotcode for the skill-bars, since the code got changed everytime I tried to re-adjust it inside my textbox, so I had to type it in again to work.

    DEMO: http://roberthunecke.com/redesign/skillbars_test/

    #127584

    Thanks Peter,

    The code helped with most of the vertical lines. There are still lines on the left where the social icons are and one on the right next to the phone. Here is a link http://www.omglovetwins.com/test

    Would it be possible to make them black as well?

    Thanks,

    jasmine

    #126005

    The issue is apparently the Video component in the 1/3 column to the right in the color section. Once I remove that the margins are aligned properly.

    Can you verify that and provide a solution?

    #123192

    Hi,

    Is Brode even a page or just a reference mark since I don’t remember seeing any page link for it anywhere? It feels like there is an offset somewhere. If you are interested in finding out you can do a test by switching Brode with another menu item and seeing if first menu item changed, will now lose highlight color and brode gets it in 2nd or 3rd position.

    I can give you the css to fix the problem however

    #top.page-id-1740 ul #menu-item-1765 a {
    color: #001A4A;
    }

    Thanks,

    Nick

    I’m sorry, I forgot to mention that the sidebar has nothing to do with it. I only activated it to make the problem more visible. Check the links above again to see how it looks without the sidebar.

    As you can see, the fullscreen slider is still forced to a certain width instead of fullscreen. Something must still be wrong. No sidebar issue.

    #126803

    Hi!

    Yes it will remove the wpautop filter: http://codex.wordpress.org/Function_Reference/wpautop from all text elements. I’ll talk to Kriesi – maybe he can improve the the filter logic somehow.

    Best regards,

    Peter

    Hi,

    You can control them with the column layout. Set the page to “No Sidebar”. Insert the fullscreen slider. Add a 1/1 column below then insert the video. Below, add a 1/4 column then insert a Sidebar element. Beside the 1/4 column, insert the 3/4 column for the content.

    Regards,

    Ismael

    #124522

    Hi,

    Using this test site: http://responsinator.com/?url=http%3A%2F%2Ffixionmedia.com%2F

    I can see the scroll to top button.

    I’ll tag Devin to check this further.

    Regards,

    Ismael

    #127894

    Hi,

    You can add something like this on your custom.css or Quick CSS

    /*
    Mobile Styles
    ================================================== */
    /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

    @media only screen and (max-width: 767px) {
    /* Add your Mobile Styles here */
    .avia_transform .avia_start_animation.bottom-to-top.avia_image {
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    animation: none;
    opacity: 1;
    }

    }

    Regards,

    Ismael

    #25701
    Jason
    Participant

    I created a thread the other day at but it was closed for replies before I could implement the suggestions. I had a few issues (1-4), and also have a few more questions (5-)… hope you can help.

    1. The more tag does not work in the home page news slider :( The avia slider seems to be cutting the text off on it’s own accord. Any tips appreciated!

    2. Had to use

    #top .avia-post-nav {

    display: none;

    }

    but that worked a treat, thanks. It’d be nice for page optimisation to prevent it from being generated, though…

    3. I added the new twitter code, but im getting padding at the top of it and lots of padding at the bottom. Any ideas how to pack this up?

    4. OK – may be the same issue above.

    5. New question. I have a problem with the single blog post with sidebar. If I enable the sidebar, I get a nice single post view with a left aligned image and text to the right. The problem is, the sidebar, even though configured for left, shows up on a product page in the woocommerce store. I don’t want a sidebar anywhere really, but if I disable it the single blog post view gives a centered image with text underneath that I don’t like the look of. Any ideas?

    6. New question. Is there a way to set the height of rows in each column of the multi-column table so they are all the same?

    7. New question. What’s the easiest way to get a set of social icons in the footer?

    8. New question. With a browser width of ~1024px, the action icon links on the Team Member elements at wrap around rather than pop underneath (this happens if you shrink the browser a little further). Any ideas?

    Cheers,

    Jason

    #25700
    DavyE
    Participant

    I’ve noticed that animated images (fade in from bottom to top etc.) work on my iPad 2, but they only fade in when my scrolling has stopped completely. This means they don’t appear when I keep scrolling, no matter how slow I scroll, so I don’t see any images at all then.

    To make sure people do see the images, even when slightly scrolling through the page, I would think it’s best to disable the animation just for mobile devices. Any ideas please?

    #127474

    Hi Nick,

    This is what I did:

    1) Create main menu with all the pages from the selection box on the left, as usual.

    2) Create 3 custom menu items with, indeed, a # as hyperlink so it doesn’t open any page by clicking on it.

    3) Drag all page items below it’s respective custom menu item.

    I have the mobile slide-out menu activated, but it is still the desktop menu on my iPad 2 in landscape mode. I do get the slide-out menu when turning to portrait mode, but not on landscape. Actually, I like it that way, it would be rather awkward to have that menu button in landscape mode as for me the menu fits perfectly well in landscape mode. I just need to find a way to close the menu again when you don’t want to click through to a another page.

    Let’s hope you find a fix.

    Thanks!

    #124521

    Have the same on my iPad 2.

    Sure you can! 2 versions, both with exact same content, just different ordering of the items. Version 1 has the fullscreen slider below the video, version 2 has the slider above the video. As you can see, the problem only appears when it’s below the video. And it doesn’t matter how much other content there is between the video and the slider, as soon as there is a video anywhere before the slider, it’s messed up.

    I’ve centered both the image and text in the slider so you get an idea of how wrong it is.

    Link with the problem:

    http://goo.gl/NVWBR

    Link without the problem:

    http://goo.gl/SVve1

    #127784

    Hi,

    You can add the links and social media icons on Enfold > Header. It will display the same icons with the header icons.

    Your scroll to top button looks fine. You can change the position with this

    #scroll-top-link {
    right: 100px;
    bottom: 100px;
    }

    Regards,

    Ismael

    #127300

    Dude,

    I think I understand. Please tell me if I am correct for my Apple logo and link:

    1. On Enfold > Header > Add the Tumblr social icon for example. Place my Apple link.

    2. Add this to the very end of custom.css

    #top .social_bookmarks_tumblr {
    background: url(../images/apple.png) no-repeat center;
    }

    #top .social_bookmarks_tumblr:hover a {
    color:#fff;
    background: url(../images/apple-hover.png) no-repeat center;
    }

    #top .social_bookmarks_tumblr a {
    text-indent: -9999px;
    }

    3. In header.php replace:

    $social_args = array('outside'=>'ul', 'inside'=>'li', 'append' => '');

    with

    $social_args = array('outside'=>'ul', 'inside'=>'li', 'append' => '<a href="http://apple.com/example" class="apple" target="_blank"><img src="http://mywebsite.com/apple.png" title="Apple" alt="Apple" /></a>');

    Are these the full directions? Don’t I need 2 icons? One for hover and one regular? Wouldn’t that change the second part of the code in the header.php? I notice the color hex in the header.php is specified #fff. I want the background to be black on hover.

    Thank you,

    Jasmer

    #127583

    Hey!

    Please use following css code

    .sub_menu>ul, #top .sub_menu>ul>li {
    border-color: #000000;
    }

    Regards,

    Peter

    #127299

    1) If you want to add an image icon I’d suggest to use the “append” parameter of the social media icons function – it helps you to append any html code (including image links) to the social icons element: https://kriesi.at/support/topic/how-do-i-add-a-you-tube-icon-to-social-icons-in-the-header

    2) I think the icon size is not important. I’d recommend to use 32px x 32px or 64px x 64px icons. Then you can use css code to scale it down if necessary.

    #127322
    #127814

    In reply to: Sidebar

    Hi,

    You can add this on your custom.css or Quick CSS

    .widget {
    padding: 10px 0 10px 0;
    }

    You can adjust the top and bottom padding values.

    Regards,

    Ismael

    #126647

    Also am having trouble with my homepage slider, it looks perfect fit on my pc/laptop and mobile but only half of the contents is visible in my tablet(may be the slider is not re-sizing as it should be).

    Thanks

    #25686

    Topic: Many Problems :(

    in forum Enfold
    Bluemkt
    Participant

    Hello, I’m creating again a topic, because my main problems weren’t solved yet.

    1) My biggest problem is with the form, look how appear: http://blueberrywebsites.com.br/bbmarketing/contratar/#tab-id-2 (TRY TO CHANGE THE TABS) http://prntscr.com/1c838n

    2) Look at the bottom, I input a form there, and there is a extra spacing http://blueberrywebsites.com.br/bbmarketing/servicos/email-marketing/

    3) My logo doesnt show well on streched menu http://prntscr.com/1ceijq

    4) My logo doesnt appear on IE 8 and some icons too

    5) My chat fixed button on the bottom right doesnt look good on the footer, scroll to see what happens.

    Thanks, I know you have a good support, but please I have that issue on menu and my forms few days ago.

    #25682
    techmatters
    Participant

    Hi, I have a bit of an issue – a strange one, too, that seemed to pop up quite randomly, after working without a problem for a while now. I have a homepage slider on http://www.profoundcoaching.com.au/NEW/, with a Youtube clip that appears when clicked (autoplay is set to off.) Until this morning, however, this clip had a thumbnail as expected (the one generated by Youtube, which you can select after uploading the image; I did it myself, so I know that it was done correctly) — but then, after I edited something else entirely in the slide, the thumbnail has *disappeared*.

    In its place is the ugly grey “default” thumbnail. When the image is clicked, the video plays normally, but that thumbnail is obviously quite ugly and uninviting – no one will bother to click on it and see the video, if there isn’t a visually pleasing image there to encourage them to.

    Any help that anyone can offer would be *greatly* appreciated! Everything else on this site is ready to go, and we were *just* about to go live before this issue popped up.

    Kind regards,

    — Nathan

    #126004

    Did you make the two pages at different times? Maybe between upgrades? I tried duplicating the layout of the page where the item isn’t getting the correct class but I’ve not been able to going off the look of the layout.

    Hi DavyE,

    Can I see your example page live? I just re-created what you have above and the video and slideshow were both fullscreen without issue.

    Regards,

    Devin

    #127696

    Hey Everyone!

    We are working on it! At least, I have for the past few months. I’ve been working on adding to our github wiki (which is private) in preparation for Kriesi’s new site which will be an Enfold child theme.

    So yes, things are in the works once support slows down a bit. With how popular Enfold has been we are swamped a bit more than normal but I *think* things are starting to slow down a tad which will give me some time to work on new docs and videos.

    Probably not the best answer but we’ll have some more news on it hopefully very soon.

    In response to what formateins mentioned, keep an eye out for a new blog post here on the site on using Chrome Dev tools to do more css modifications. I’m working on writing that out now and then doing the videos for it this month.

    I’ll close this for now so we don’t get too much of a secondary feature request topic going but thank you everyone for the enthusiasm on push to return on this project :)

    Regards,

    Devin

    #25667
    Torlock
    Participant

    Hello, I am trying to implement social icons into my socket as mention here: https://kriesi.at/support/topic/social-icons-in-footer-socket

    I have managed to use the first set of codes for footer.php and custom.css to get the actual icons in the socket but now I have two problems.

    Firstly how do I go about choosing which social icons to display and also how do I change the links.

    And secondly, you will notice the ‘back to top’ arrow is overlapping for some reason. I believe this is not to the change in code as I to the changes back and the problem still persists. It looks like the actual socket has increased in height for some reason.

    Thanks in advance for any help!

    #127251

    In reply to: Social Icon at Socket

    Hi,

    Try this. Please add it to your /css/custom.css file. If you want to change something, font size, social bookmark positioning, copyright positioning are there in the code below, but i think this will work well.

    @media only screen and (max-width:400px) {
    #socket {
    font-size:.73em;
    }
    #top #socket .social_bookmarks {
    right:-16px;
    }
    #socket .copyright {
    position:relative;
    left:-13px;
    top: 5px;
    }
    }

    Thanks,

    Nick

    #124520

    I’m experiencing the same issue. The “scroll to top” button/arrow works in Firefox, IE, as well as Blackberry. But not on Android or iPad.

    http://fixionmedia.com/

    #127548

    Hi!

    You can use following code to change the color – insert it into the quick css field

    #top .toggle_icon .hor_icon, #top .toggle_icon .vert_icon, #top .toggle_icon{
    border-color: #333;
    }

    Regards,

    Peter

Viewing 30 results - 141,181 through 141,210 (of 142,510 total)