Website Issues

Tagged: 

This topic contains 14 replies, has 2 voices, and was last updated by Portucally Portucally 1 week, 4 days ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #668
    Qwinn
    Qwinn
    Keymaster

    This thread is for any issues with the QwinnMods website itself. Link doesn’t work? Can’t subscribe? That sort of thing. Post about it here and I’ll fix it. (Obviously if your problem is “I can’t register”, then you can’t post your problem here. If that’s the issue, please send me an email at qwinnmods@gmail.com.)

    While I’m on the subject – anyone reading this from the UK, Canada, France, Italy, Spain, or Germany – could you please confirm that my Amazon portals are working? So far I have no evidence that they do.

    If you’re from the UK or Canada, clicking any of my Amazon ads on the main pages *should* automatically transfer you to your country’s Amazon website. Please try it and tell me if it does or doesn’t work. If you’re from the other European countries listed, you have to click on the banners in the QwinnMods Amazon Portals page (link on the sidebar, just above the Donate button. That page has portals for the UK and Canada too, though if I got the automatic transfer thing working correctly, they shouldn’t be necessary. At any rate, either way, please try them and see if they work.

    This isn’t a trick to get clicks – I don’t get anything for just clicking through, you actually have to buy or sign up for something for me to get anything. If you don’t want to sign up for or buy anything for this purpose, that’s fine – I just want to confirm that it’s *working*, since so far I haven’t had a single click through to any of the non-US Amazon sites and I’m getting worried that maybe it’s something I did wrong on my end. Thanks for any help.

    #669
    Portucally
    Portucally
    Participant

    While I’m on the subject – anyone reading this from the UK, Canada, France, Italy, Spain, or Germany – could you please confirm that my Amazon portals are working? So far I have no evidence that they do.

    I’m from Portugal, just tried all links and they seem ok. I would also make them so that it open on a new window/tab so that we don’t have leave your site. Just a sugestion…

    • This reply was modified 3 months, 2 weeks ago by Portucally Portucally.
    #671
    Qwinn
    Qwinn
    Keymaster

    Hmm, ok, thanks for that. My admin page at Amazon doesn’t show any click throughs for the other portals yet, but they seem to only update once a day so I’ll wait till tomorrow to see if the clicks registered. My own clicks aren’t supposed to register so I couldn’t test it myself.

    As for making the links open in a new tab, I don’t think I can do that. Amazon gives me the script for the banners, futzing with the script code would probably be dangerous and might invalidate the click for the intended purposes. Good idea though, would if I could.

    And do please feel free to use this thread to add any suggestions for improving the website!

    #672
    Portucally
    Portucally
    Participant

    Ah, I see they gave you iframe codes. Those are hard to mess with. If they had given you plain links with images that would just need to add a target=”_blank” but with iframes just if when you get the code from Amazon they gave you that option…

    #675
    Qwinn
    Qwinn
    Keymaster

    Yeah, they’re iframes. I have a javascript option as well, but frankly I’m loathe to use it… IMHO disabling javascript is a legit security measure and it’d cause problems (or at least, not work) for people who do so. iframes at least work for everyone and pose no security concerns I’m aware of.

    #786
    Qwinn
    Qwinn
    Keymaster

    Hey Portucally,

    Since you said you’re willing to help with CSS 🙂 I’m messing about with trying to change the overall theme from light to dark. Problem is, it makes the forums unreadable. The plugin is bbpress, btw. I’ve tried this CSS (cribbed from a post asking about the same thing):

    .forum a { color: white !important; }
    .bbp-forum-info { color: black !important; }
    .bbp-forum-topic-count { color: black !important; }
    .bbp-forum-reply-count { color: black !important; }
    .bbp-forum-freshness { color: black !important; }
    .bbp-forums,
    .bbp-topics {
    border: 1px solid rgba(125, 125, 125, .5);
    color: white !important;}
    .bbp-forums a { color: white !important; }
    table.bbp-forums th, table.bbp-topics th, table.bbp-topic th, table.bbp-replies th {
    background-color:black;
    color: white !important;
    }
    table.bbp-forums thead tr {
    border-top: 1px solid rgba(125, 125, 125, .5);
    }
    #content table tbody tr.odd td {
    background-color:#222;
    color: white !important;
    }
    #content table tbody tr.even td {
    color: white !important;
    background: #111;
    }

    #content table.bbp-forums tfoot td, #content table.bbp-topics tfoot td, #content table.bbp-topic tfoot td, #content table.bbp-replies tfoot td, #content table.bbp-replies tr.bbp-reply-header td, #content table.bbp-topic tr.bbp-topic-header td {
    background: black;
    color: #fff !important;
    }

    Problem is, the background of the posts and forum list *doesn’t* go black, and it’s still way too hard to read.

    Can you spot what I’m doing wrong offhand?

    #793
    Qwinn
    Qwinn
    Keymaster

    I actually got MUCH better results with this:

    #forums-list-0 .bbp-forum-title {
    font-size:1.6em;
    text-decoration:none;
    }

    #forums-list-0 .bbp-forum-title a:link {
    text-decoration:none;
    }

    #entry-content #bbpress-forums {
    background-color:#232d36;
    overflow:auto;

    }

    #bbpress-forums ul, #bbpress-forums li {
    background-color:#232d36;
    overflow:auto;

    }

    #bbpress-forums ul.bbp-replies, bbp-body, #bbpress-forums p {
    background-color:#232d36;
    }
    #bbpress-forums ul.forums-list-0 li.bbp-body {
    background-color:#232d36 !important;
    overflow:auto;
    }

    At least it’s mostly readable, but it’s still not right… not all the backgrounds go dark, and odd pieces of the page would remain light instead of dark. Eh, don’t worry about it, this is bbPress specific and I can’t expect ya to help without being able to see the results of changes. Sadly, I used to have a “staging” copy of my website that I could tinker with without affecting the main site, but apparently that’s only available for a single month on wordpress, then it goes away. Bleah.

    #797
    Portucally
    Portucally
    Participant

    I would have to have a look at all CSS to know better where to touch…

    Anyway, just a quick look and what you need to play with is along this lines:

    #bbpress-forums {
    background: transparent;
    clear: both;
    font-size: 12px;
    margin-bottom: 20px;
    overflow: hidden;
    color: yellow;
    }
    #bbpress-forums div.even, #bbpress-forums ul.even {
    background-color: #254;
    }
    #bbpress-forums div.odd, #bbpress-forums ul.odd {
    background-color: #324;
    }

    body.reply-edit .reply {
    float: none;
    }
    #bbpress-forums div.reply {
    height: auto;
    width: 100%;
    }
    #bbpress-forums div.bbp-forum-header, #bbpress-forums div.bbp-topic-header, #bbpress-forums div.bbp-reply-header {
    background-color: #232d26;
    }

    Note that the syles above are just examples and I didn’t dig deeper into the quotes style and links color. Also, there are some images with borders that also need color changed:

    #bbpress-forums p.bbp-topic-meta img.avatar, #bbpress-forums ul.bbp-reply-revision-log img.avatar, #bbpress-forums ul.bbp-topic-revision-log img.avatar, #bbpress-forums div.bbp-template-notice img.avatar, #bbpress-forums .widget_display_topics img.avatar, #bbpress-forums .widget_display_replies img.avatar {
    border: 3px double rgba(66, 137, 244,0.5);
    float: none;
    margin-bottom: -7px;
    }

    Again, it’s just examples. You have to test wich color scheme works better for what you want.

    Personally, I like as it is.
    Maybe some changes in some links like EDIT/REPLY/COUNT NR…. something like:

    .bbp-reply-header a {
    background: rgba(75, 66, 244,0.5);
    padding: 5px 10px;
    line-height: 12px;
    color: blue!important;
    border: 1px solid rgb(75, 66, 244);
    border-radius: 8px;
    vertical-align: bottom;
    box-shadow: inset 0 0 5px rgba(241, 242, 208, 0.8), 0 4px 2px #000!important;
    transition: all .3s;
    }
    .bbp-reply-header a:hover {
    box-shadow: inset 0 0 5px rgba(241, 242, 208, 0.8)!important;
    color: #f7ff14!important;
    text-shadow: 1px 1px 1px #000;
    }

    Oh, take note that some styles need the -webkit prefix to work on Chrome and such browsers…

    tip:

    I can’t expect ya to help without being able to see the results of changes.

    In Firefox I use FireBug (But inspect element also available in later versions), Chrome and Opera right-click and inspect element. That allows you to edit site styles and see the changes. Just remember to keep the notepad open and make note of the changes before refreshing the page.
    I’ve written a tutorial about these tools on my blog awhile ago: Inspeccionar/Editar Elementos num Blogue/Site . It’s in Portuguese but I included some images so you might be able to see what I mean. 😉

    • This reply was modified 3 months ago by Portucally Portucally.
    • This reply was modified 3 months ago by Portucally Portucally.
    • This reply was modified 3 months ago by Portucally Portucally.
    #801
    Portucally
    Portucally
    Participant

    btw, the tiny avatar images, I would make them so:

    #bbpress-forums p.bbp-topic-meta img.avatar, #bbpress-forums ul.bbp-reply-revision-log img.avatar, #bbpress-forums ul.bbp-topic-revision-log img.avatar, #bbpress-forums div.bbp-template-notice img.avatar, #bbpress-forums .widget_display_topics img.avatar, #bbpress-forums .widget_display_replies img.avatar {
    border: 2px double #ddd;
    box-shadow: none!important;
    float: none;
    margin: 0 0 -3px;
    }

    Make the border smaller, 3px a bit too much for such small images.
    Shorten the negative margin at the bottom, smaller border increase size of image so no need -7px.
    Remove the box-shadow, !important might be needed as that style comes from styles from other images present in the forum. Removing box-shadow also makes it readable the word by author currently hidden by that.

    Oh, and if you change the main style to a darker theme, you should also change the border color here.

    Hope it helps. 🙂

    #815
    Qwinn
    Qwinn
    Keymaster

    Thank you! Great stuff. I’m kinda with you on “I like it as it is” which is why I haven’t pursued this further yet, but there is the potential for it to be better with such changes so I’ll work on it at some point. Giving me a way to test the .CSS in the browser without mucking up the website itself is key, so THAT is very appreciated. Thanks tons.

    #1060
    Portucally
    Portucally
    Participant

    Why did you removed the sidebar from the site? O.o

    It was helpful and since 2 days ago (I think), I can’t find it either on my PC or smartphone…

    EDIT: I can see it on the frontpage, just not in the forum.

    Still, navigation-wise the sidebar is a good thing. 😉

    • This reply was modified 3 weeks, 4 days ago by Portucally Portucally.
    #1062
    Qwinn
    Qwinn
    Keymaster

    I didn’t do it! No idea why its gone. I’ll check into it tonight, thanks for the heads up.

    #1064
    Qwinn
    Qwinn
    Keymaster

    Fixed! I don’t have a child theme set up yet, so when my theme (TwentySeventeen) got updated, it wiped out the change I made that gets it working.

    Had to re-figure out how to do it, too. It’s been a while. For my own future reference: In wp-content/themes/twentyseventeen, need to edit page.php and add

    < ?php get_sidebar(); ?>

    …right after /div !– #primary –>

    Again, thanks for the heads up!

    • This reply was modified 3 weeks, 4 days ago by Qwinn Qwinn.
    #1100
    Qwinn
    Qwinn
    Keymaster

    Hmmm, for some reason, the Amazon ads I was displaying with iframes now get cut in half in the sidebar. I’m replacing them with the javascript versions until I can figure out why.

    #1111
    Portucally
    Portucally
    Participant

    Have you checked how it looks on diferent browsers?

    Some browser updates might cause display changes…

    Anyway, one place I always go for answers is : stackoverflow

    And to check browser compatibility: Browserstack

    Hope it helps. 🙂

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.