Issues with colours and some mobile responsive issues

[infoasocialstandard]

Hello,

I have some issues with the colours and rendering. My text is white, but the colour the event screen is showing, a off white background. It is the same for all the title headers.

When in mobile view the map and the ticket selection box is off to the right of the background and looks wrong. In desktop view it has also an irregular form as the browser shifts the responsiveness.

Im not sure how to upload screenshots to you, but I have some that will make better sense of my problems.

Thanks

Leigh

[Barry]

Hi Leigh,

While you can’t upload images directly to the forum you can upload them to your WP site, or to a service like Droplr or Dropbox, and share the links here.

I took a quick look at your site via the URL you shared – I couldn’t immediately locate the main events page, though: can you share a link to that (privately if you prefer)?

Thanks!

[infoasocialstandard]

Hello, thanks for your quick response.

I have included a few pages you should be able to understand.

http://wholemealrecords.com/shows/month/

The calendar has crushed Day Titles before it shortens them to three letter versions. I wouldn’t mind to always have them at three letter version if this make it easier. You will also see the header is off white in colour while my text is white, which makes it almost impossible to see.

http://wholemealrecords.com/show/grooveband-night/

This page I have the most difficulties with. The background is white for the main body and the header…text cannot be read. The map renders badly too. It is too small when the page is full screen, but it becomes a much better size when shrunk down to its minimal mobile view.

The map and ticket box are set too far to the right in mobile view. Everything else is set ok and it ruins the rest of the layout when these two are set incorrectly.

The events widget is also off in mobile view. The numbering is hidden in the change of colour. I have played with this in the inspector of chrome and found that simple changes do solve some of the rendering for the Events Widget, and loosing the background colour helps to sow the white writing. Although I would like to change the background colour to be the same blue as the Ical and google calendar button.

Looking forward to your help

Leigh

[Barry]

Hi!

So the first thing to read up on is our Themer’s Guide – particularly the section on setting up a custom tribe-events.css stylesheet.

To deal with the crushed calendar headers there are two things we can do. One is to add a rule like this one to your own tribe-events.css stylesheet:

#tribe-events table th { font-size: 10px; }

The other is to override the month/loop-grid.php template and, in your custom version, find this line of code:

$days_of_week = tribe_events_get_days_of_week();

Replace it with:

$days_of_week = tribe_events_get_days_of_week( true );

Which should force short (typically 3-letter) day names.

Does that help with that particular problem?

[infoasocialstandard]

Hello, I used the second option, so that is working fine for me now. Thank you.

So to change the colours for the text body for the events pages..how is the best way to go about this?

Thankyou

Leigh

[infoasocialstandard]

Hello, Although the calendar days need to be smaller for mobile view as they are too big even in three letter format. How do I reduce the text size?

Thanks

Leigh

[Barry]

Hi!

Something like this:

#tribe-events table th { font-size: 10px; }

You can of course reduce that value further (from 10px to 6px or whatever) if you need to. Does that help with the month view headers?

[infoasocialstandard]

Hello, where do I need to add that?

I have found since the first adjustment I have lost the abbreviated three letters on mobile and reduced laptop browser screen. So full screen is perfect. as soon as it reduces, the responsive frame changes and the letters disappear. I guess they are seen as too big and are then removed from visibility. I am not sure of the best way to approach fixing this.

Thankyou

Leigh

[Barry]

Hi Leigh!

Hello, where do I need to add that?

A custom tribe-events.css stylesheet’s a good spot – take a look at the Themer’s Guide for more details on that front 🙂

I have found since the first adjustment I have lost the abbreviated three letters on mobile and reduced laptop browser screen. So full screen is perfect. as soon as it reduces, the responsive frame changes and the letters disappear. I guess they are seen as too big and are then removed from visibility. I am not sure of the best way to approach fixing this.

Ah yes, apologies! I didn’t actually test that out but you’d need to make a further change in the same template as before. Find this line:

<th id="tribe-events-<?php echo strtolower($day) ?>" title="<?php echo $day ?>" data-day-abbr="<?php echo $wp_locale->get_weekday_abbrev( $day ); ?>"><?php echo $day ?></th>

Change it to:

<th id="tribe-events-<?php echo strtolower($day) ?>" title="<?php echo $day ?>" data-day-abbr="<?php echo $day ?>"><?php echo $day ?></th>

Does that help?

[infoasocialstandard]

Right okay. I will put together a page for the text size. Pardon if this is wrong, but I cant see any difference between the two codes for the adjustment. Is there something I can not see?

Thanks

Leigh

[infoasocialstandard]

Oh. Ignore that…Im guessing there is alot more code hidden further along when I drag the mouse acfros the text…Viewing this on my mobile atm. Thanks

[Barry]

No problem!

The difference though is that in the original template we use:

data-day-abbr="<?php echo $wp_locale->get_weekday_abbrev( $day ); ?>"

Whereas in the modified version we use:

data-day-abbr="<?php echo $day ?>"

Please note I’ll be off duty for the next day or so, but I hope this clarifies things and if you need further help I’ll be happy to do what I can once I’m back 🙂

[infoasocialstandard]

Hello, right, days are now sorted. I just need to reduce the text size in mobile view. I tried creating a style sheet, but I have no success. Im not sure where to place it..

either in /tribe-events/
or in /tribe-events/month/

and I am just using text editor to create a .css sheet with the code you have provided.

not sure how much of this is correct or not.

Thanks

Leigh

[infoasocialstandard]

I am looking at the oversized text. I am wondering if it is a problem of being too big or a location issue? The Friday sits fine, in the centre of the box, it may become weird if the text size is dropped? Thanks again

Leigh

[Barry]

I tried creating a style sheet, but I have no success. Im not sure where to place it..

either in /tribe-events/
or in /tribe-events/month/

If you create a custom tribe-events.css stylesheet it would normally live in tribe-events/tribe-events.css, ie:

wp-content/themes/YOUR_THEME/tribe-events/tribe-events.css

The Friday sits fine, in the centre of the box, it may become weird if the text size is dropped? Thanks again

OK, so the first short snippet in my second reply shows the basic approach for altering the text size – but exactly what will and won’t work for your site/meet your personal tastes is of course something we’ll need to leave to you to figure out 🙂

(I’ll go ahead and close this thread as I think – hopefully – you’ve got enough information to work on here – but if any other issues crop up that you need help with please don’t hesitate to open new threads and one of the team will be only too happy to help.)

Good luck!

[Author]

Posts