Posts by LogixX

    How can I add borders on the left and right side of the main content that would go from the bottom of the page to the top? I want to separate the page background from the content and container areas. I'm using the basic WBB style.

    I'm looking for a reviews plugin or application that users can rate things like locations, for instance hiking trails and camping sites (and of course products). It would be nice if a user could submit a location, show where the location is on a map (like the gallery function), write a brief review, add photos and give it a star rating.


    Does anything like this exist? If it doesn't, I'm sure it would be very popular if someone made one.

    Try changing your script to:


    <a
    href="http://drakuli.com/" target="_blank">
    <img border="0" alt="Drakuli Games Store"
    src="https://pbs.twimg.com/media/CQH9PWzUcAAFDd0.jpg:large"/>


    or


    <a
    href="http://drakuli.com/" target="_blank">
    <img border="0" alt="Drakuli Games Store"
    src="https://pbs.twimg.com/media/CQH9PWzUcAAFDd0.jpg:large" style="max-width: 100%;"/>

    Paul, good to see you here! What's the URL of your forums, mind sharing? Would like to see Gal 2.1 in action.
    Tom

    Tom, here is a link to my gallery http://upstatenyoutdoors.com/gallery/ . The gallery and the rest of the forum/site are still very new and I still have a lot to do to it when I can find the time. The "Camping" and "Nature" categories are the only categories with photos in them as of right now.


    I'm not sure if it was already possible with 2.0.5 but so far, what I like most about the gallery is what happens when you embed a photo from the gallery into a forum post which can be seen here http://upstatenyoutdoors.com/thread/7-image-test/ when you click on a picture. With the niche of my forum, this will be a very nice feature if it ever takes off (becomes somewhat active). I'm not too impressed by the watermark feature because if people want to steal images from a website, they are going to do it if they are watermarked or not.

    I'm thinking I could learn German faster than I will get replies here in the English forums :(


    I figured everything out myself with the help of this thread For new users - template overrides quick how to and searching on Google. In case this helps anyone else:


    First I created a new template group and edited the header template by placing <div id="headimage"> </div> around the logo code that is in the header template. Next I assigned the new template group to my default style and then I changed my added CSS to...


    #topMenu {
    border-bottom: 1px solid #284930;
    }
    #headimage {
    background-image: url("images/logoBG.jpg");
    background-repeat: no-repeat;
    background-position: center;
    min-height: 300px;
    padding-top: 50px;
    margin-bottom: -50px;
    }
    @Media only screen and (max-width: 990px) {
    #headimage { display: none !important; }}
    .mainMenu> ul {
    margin-top:10px;
    display: block;
    background: #467752;
    border-top: 1px solid #284930;
    }
    .mainMenu > ul > li > a {
    color: #fff;
    }
    .mainMenu > ul > li:not(:last-child) > a {
    border-right: 1px solid #284930;
    }
    .mainMenu > ul > li.active {
    font-size: 1.4rem;
    margin-top: -8px;
    border-top: 1px solid #284930;
    }


    There is probably a better way of doing it but unfortunately I can't wait days for an answer that might not never come. It's very disappointing that an answer to what should have been a very easy question for someone with CSS and HTML experience never came.

    Ok, I give up on trying to hide the image in mobile view and just want to solve what should be simple problems for now. Everything looks fine on my PC but on my smart phone the menu is out of place and a gap remains.


    My added CSS looks like this:


    #topMenu {
    border-bottom: 1px solid #284930;
    }
    #pageHeader {
    background-image: url("http://upstatenyoutdoors.com/images/logoBG.jpg");
    background-repeat: no-repeat;
    background-position: center;
    padding: 45px 0px 0px;
    min-height: 300px;
    }
    .logo {
    margin-bottom: 50px;
    }
    .mainMenu> ul {
    margin-top:10px;
    display: block;
    background: #467752;
    border-top: 1px solid #284930;
    }
    .mainMenu > ul > li > a {
    color: #fff;
    }
    .mainMenu > ul > li:not(:last-child) > a {
    border-right: 1px solid #284930;
    }
    .mainMenu > ul > li.active {
    font-size: 1.4rem;
    margin-top: -8px;
    border-top: 1px solid #284930;
    }


    My forum looks like this on my phone:



    Maybe this thread should be moved to the "Creating styles" section?

    I just discovered that adding #pageHeader {margin-top: -18px;} just pushes the image and menu out of view when looking at the forum on a mobile phone. I need the menu to be visible and the image to go away, any help with this would be greatly appreciated.