1. Hello Guest!

    Thank you for visiting the ClubRunner Community website, you can login using your ClubRunner account information by clicking the login link on the top of every page.
    Dismiss Notice

Advertiser logos horizontal rather than vertical

Discussion in 'Website Customization' started by Carl Dierschow on Aug 30, 2019.

  1. Carl Dierschow

    By:Carl DierschowAug 30, 2019
    Community Member

    Joined:
    Oct 26, 2017
    Messages:
    12
    Likes Received:
    3
    Location:
    Consulting - Small Business
    The advertiser widget currently lays out its elements vertically, so it's suitable for being put in a narrow column on the left of right side of the page. However, this is extremely unfriendly to other types of page layouts.

    Is it possible to change it so that the advertiser logos horizontally in a layout that I do with a wide width and smaller height? I like that the widget randomizes the order and tracks click-throughs, so I'm not excited to try doing this with an image map or other manual mechanism.
     
  2. John Borst

    By:John BorstAug 30, 2019
    Well-Known Community Member
    Beta Tester

    Joined:
    Jun 25, 2018
    Messages:
    215
    Likes Received:
    52
    Gender:
    Male
    Occupation:
    Retired Education Administration and Teacher
    Location:
    Education - retired
    Carl I fully support your option. In fact I would like both to work at the same time. I have a lateral banner ad which the sponsor requested. I have to inset it between stories manually. Also I can not provide click-through data but the sponsor is okay with that.

    I also would like to contract with a sponsor and put them in the middle of stories in perpetuity.
     
  3. Carl Dierschow

    By:Carl DierschowSep 8, 2019
    Community Member

    Joined:
    Oct 26, 2017
    Messages:
    12
    Likes Received:
    3
    Location:
    Consulting - Small Business
    OK, everyone, I've done some work on this. It uses a custom CSS trick which, of course, is unsupportable by ClubRunner. But it seems to work most of the time, but it's not perfect.

    All my ads are exactly 175x200 pixels.

    div.allSponsorsItemContainer1 {
    float: left;
    text-align: center;
    vertical-align: middle;
    width: 179px;
    height: 204px;
    }

    div.allSponsorsItemaltContainer2 {
    float: left;
    width: 175px;
    height: 200px;
    }

    div.allSponsorsItemaltContainer3 {
    float: left;
    width: 175px;
    height: 200px;
    }

    div.sponsor-guide {
    float: none;
    clear: both;
    }
     
  4. John Borst

    By:John BorstSep 14, 2019
    Well-Known Community Member
    Beta Tester

    Joined:
    Jun 25, 2018
    Messages:
    215
    Likes Received:
    52
    Gender:
    Male
    Occupation:
    Retired Education Administration and Teacher
    Location:
    Education - retired
    Carl, I am afraid I do not understand how to use your code. Where do you place it? Where and how do you insert the ad? Can you do a sample on your club site and send me the code from the sample so I can see the whole picture?
     
  5. Bob Spencer

    By:Bob SpencerSep 14, 2019
    Community Member

    Joined:
    Apr 17, 2018
    Messages:
    36
    Likes Received:
    20
    Gender:
    Male
    Location:
    Information Technology
    John -
    Put Carl's code in a text file, give it the extension CSS instead of TXT and follow these directions.

    https://www.clubrunnersupport.com/article/734-website-designer-settings-overview#9
     
  6. Carl Dierschow

    By:Carl DierschowSep 15, 2019
    Community Member

    Joined:
    Oct 26, 2017
    Messages:
    12
    Likes Received:
    3
    Location:
    Consulting - Small Business
    John, the advertisers are those which we entered using Admin -> Website Sponsorship Area. Therefore, they're the ones that show up in the All Sponsors Widget which is listed in the Website Page Designer under the "Bulletin & PR" tab.

    The code is entered via Admin -> Website Designer 3.0 -> Settings -> Upload CSS. That CSS is applied to every page on the site automatically by ClubRunner. You have to figure out what HTML classes you want to modify by reverse-engineering the HTML source. I did that using the Firefox Inspector, which lets you see the displayed result right next to the source code and what's associated with what. But of course the HTML goes many levels deep, so it takes a bit of spelunking and guessing.

    You can see an example of the end result at www.fcfoothillsrotary.com/Page/our-sponsors . Like I said, though, this CSS is customized to the exact size of our ads because I've hardcoded the dimensions to insert some whitespace in between. If you have variable size ads, you may not get it to work properly.
     
  7. John Borst

    By:John BorstSep 19, 2019
    Well-Known Community Member
    Beta Tester

    Joined:
    Jun 25, 2018
    Messages:
    215
    Likes Received:
    52
    Gender:
    Male
    Occupation:
    Retired Education Administration and Teacher
    Location:
    Education - retired
    Carl I very much appreciate your assistance, however, I simple do not feel confident enough to try it. Sorry! eh!
     
    Carl Dierschow likes this.
Top