widget styling

Agapi G. replied the topic: widget styling

Hey Criss!

That would be nice, actually, feel free to do that! But make sure that it is imported after all style.css and other default styles, so they will be overridden.

But perhaps the best solution is Custom CSS panel of Event Calendar WD, where the code is added now. It isn't modified when you update the plugin.

Thanks! Have a good start of the week!


Kind regards,
Agapi G.
Web-Dorado team
#77045

Please Log in or Create an account to join the conversation.


Criss replied the topic: widget styling

My dear, we used the class logic to get around the problem of styling the widget, but substituting the main calendar class with the widget one is not applying for all the widget's views. I believe ".cal_blue" is taking priority over everything (which shouldn't be, as I'm using saddle-brown theme).

Can I ask you a favour? You can still login to my site with the password I gave you. Please create at least one class for the month+week+day views, so that I can start from that. I'd appreciate a lot.
My code is not in plugin's CustomCSS but in a separate plugin "Custom CSS & JS".

#77187

Please Log in or Create an account to join the conversation.


Agapi G. replied the topic: widget styling

Hello Criss!

Unfortunately creating a custom class would be a large and complex customization, which will be vanished after you update the plugin. So this will prevent you from getting new versions of Event Calendar WD.

But could you please let me know what changes do you need to make? I'll ask our developers to implement them on your widget calendar.
Thanks! Have a great day!


Kind regards,
Agapi G.
Web-Dorado team
#77267

Please Log in or Create an account to join the conversation.


Criss replied the topic: widget styling

I really thank you for your great patience with this CSS issue, and please understand that I don't mean to have you make big works for me :) yet, I greatly appreciate your will to do it.

You see, as you may have understood I basically need to adapt the widget style to my own footer (i.e. colors, borders, fonts). Together we managed the list-view, but I need to do the same for the month+day+week views. And the problem is that applying my own widget class doesn't seem to be enough.

The list of CSS might be big, as I'm playing with the Inspector, so you might just help me with doing random customization, for instance just give a pink background to all views, or eliminate any table borders.... I guess this will guide me to build all the remaining styles.
I have difficulties also because the table is inherited from the theme, so if I change a color then it will change in all my website's tables.

Criss

PS. I need also one CSS for the whole calendar+widget views, namely "font-family:Ruda;"
If you have a way to apply it everywhere, please do

#77273

Please Log in or Create an account to join the conversation.


Agapi G. replied the topic: widget styling

Hey Criss!

Our developers have applied necessary changes for switching font-family to Ruda. Could you please clear the cache of your web browser and check the fonts?

As for the changes on the widgets, could you please give us screenshots where you would like to remove the borders and backgrounds? Do you mean you want them completely removed from month, list, week and other views of Event Calendar WD widget?

Thanks! Have a great day!


Kind regards,
Agapi G.
Web-Dorado team
#77345

Please Log in or Create an account to join the conversation.


Criss replied the topic: widget styling

Yes I can see you have changed the font :woohoo:
I have also played with the Inspector and I believe this is the code I need:

/* week view */
.ecwd-widget-21334 table.cal_blue.ecwd_calendar_container .day-with-date {background-color:#333;}

.ecwd-widget-21334 table.cal_blue.ecwd_calendar_container .weekend {background-color:#2a2a2a;}

.ecwd-widget-21334 table.cal_blue.ecwd_calendar_container .day-without-date {background-color:#333;}

.ecwd-widget-21334 table.cal_blue.ecwd_calendar_container .current-day .day-number, 
.ecwd-widget-21334 table.cal_blue.mini .current-day {background-color:#816e27;}

.ecwd-widget-21334 table.cal_blue.ecwd_calendar_container .normal-day-heading, 
.ecwd-widget-21334 table.cal_blue.ecwd_calendar_container .weekend-heading {background-color:#252525;}
.ecwd-widget-21334 table.cal_blue.ecwd_calendar_container .normal-day-heading, 
.ecwd-widget-21334 table.cal_blue.ecwd_calendar_container .weekend-heading {border:0px solid #B6B6B6 !important;}

table.cal_blue.ecwd_calendar_container .day-with-date {color:#ddd;}

table.cal_blue.ecwd_calendar_container .week-start {border-left:0px solid #D6DDE2;} /* there was no calendar class on this one, so I left it without widget class */
.ecwd-widget-21334 table.cal_blue.ecwd_calendar_container .day-with-date {border:0px solid #B6B6B6 !important;}

.ecwd_calendar.ecwd-widget-mini .ecwd-events-day-details li {background-color:#333;} /* there was no calendar class on this one, so I left it without widget class */
.ecwd-widget-21334 .ecwd_calendar .metainfo, 
.ecwd-widget-21334 .event-organizers a, 
.ecwd-widget-21334 .event-venue a, 
.ecwd-widget-21334 .event-detalis span, .ecwd-widget-21334 
.event-detalis a {color:#ddd;}
.ecwd-widget-21334 .event-organizers, .ecwd-widget-21334 .event-detalis-org, .event-venue {color:#ddd;}

/* day view */
.ecwd-widget-21334 .calendar-head .current-month div {font-size:12px !important;} /* this one only in week-view */
.ecwd-widget-21334 .event-main-content, .ecwd-widget-21334 .ecwd-widget-mini .event-container, .ecwd-widget-21334.ecwd-widget-mini .ecwd_list .event-main-content {background-color:#333;}
.ecwd-widget-mini .event-container:last-child {border-bottom:2px dashed #000 !important;} /* there was no calendar class on this one, so I left it without widget class */
.ecwd-widget-mini .event-main-content.no-events {border-bottom:2px dashed #000 !important;} /* there was no calendar class on this one, so I left it without widget class */
.ecwd-day-date, .day-event-list .ecwd-week-date, .day4-event-list .ecwd-week-date, .week-event-list .ecwd-week-date {font-style:normal;} /* there was no calendar class on this one, so I left it without widget class */

I just left the !important as they were. But it's not applying as I hoped it would.

I also include a screenshot just to let you see what I want to achieve (there's also a feature request for the event logo, maybe one day you'll make it)

#77375
Attachments:

Please Log in or Create an account to join the conversation.


Agapi G. replied the topic: widget styling

Hello Criss!

Thank you for the screenshot! I have asked our developers to make the necessary changes. They will modify the CSS and get back to us very soon. I will keep you posted about the results.

Thanks! Have a great day!


Kind regards,
Agapi G.
Web-Dorado team
#77419

Please Log in or Create an account to join the conversation.


Agapi G. replied the topic: widget styling

Hey Criss!

I am happy to inform you, that the necessary changes have been made on your Event Calendar WD. Could you please take a look and let me know if everything is looking as you wished?

Thanks! Have a nice Friday!


Kind regards,
Agapi G.
Web-Dorado team
#77463

Please Log in or Create an account to join the conversation.


Criss replied the topic: widget styling

Almost there... there are a couple of styles missing but I guess I can manage on my own now... Thank you very much indeed.
You enjoy your deserved weekend too :)

Update: it's very difficult to get over this. I just don't understand why some styles are not applied everywhere. For instance, if I have one font=normal then why isn't it applied to ALL views? If I have a background=blue, why isn't it applied to ALL views?
Each view (widget and main calendar) has it's own selectors/tags... it's tedious to inspect all of them, and even more tedious when you change the style and it's not applied becaus of some !important that is more !important than that. :pinch:
Looking forward to a widget add-on.

#77467

Please Log in or Create an account to join the conversation.


Agapi G. replied the topic: widget styling

Hey Criss!

Could you please post the line of the font code you are applying? If you wish to change the font-style of all elements in the widget, the following code should work:

.ecwd-widget-21334 * {
    font-style: normal !important;
}

Thank you! Have a wonderful weekend!


Kind regards,
Agapi G.
Web-Dorado team
#77505

Please Log in or Create an account to join the conversation.


Criss replied the topic: widget styling

as you said... for instance, in order to have the text normal and #ddd, I add these:

.ecwd-widget-21334 .ecwd_calendar .metainfo, 
.ecwd-widget-21334 .event-organizers a, 
.ecwd-widget-21334 .event-venue a, 
.ecwd-widget-21334 .event-detalis span, .event-detalis a {color:#ddd !important;}

.ecwd-widget-21334 .ecwd-day-date,
.ecwd-widget-21334 .day-event-list .ecwd-week-date, 
.ecwd-widget-21334 .day4-event-list .ecwd-week-date, 
.ecwd-widget-21334 .week-event-list .ecwd-week-date {font-style:normal !important;}

but they are not applied. Also the background in the month>single event box is not applied. Thank you for your great patience.

#77511

Please Log in or Create an account to join the conversation.


Agapi G. replied the topic: widget styling

Hi Criss!

I have asked our developers to take a look at the code. They will be back to us with suggestions very soon.

But are you sure it is easier for you to incorporate this much code, rather than to create second calendar for the widget and edit the styling with Event Calendar WD Themes? You might need a few CSS edits then, but the whole styling would be more flexible.

Thanks! Have a wonderful day!


Kind regards,
Agapi G.
Web-Dorado team
#77575

Please Log in or Create an account to join the conversation.


Criss replied the topic: widget styling

I agree wth you about avoiding all this code. I'm the first one who doesn't like the idea. But as I told you earlier it's not feasible to create a second calendar because I will have to manage thousands of events, therefore I cannot add them twice for the 2 calendars.
As a matter of fact, I think the current system is ok for a few events but in reality any calendar would be crowded, so the Calendar backend page will always end up too big (but that's just my opinion).
For the moment is fine to edit the widget. Hopefully one day you'll release the widget as an add-on or with a separate style (that could be edited in the backend).

#77587

Please Log in or Create an account to join the conversation.


Agapi G. replied the topic: widget styling

Thank you for your notes, Criss!

That is understandable, of course, we are happy to assist you whichever way you prefer to work. And hopefully our developers will create an option to select a different theme for the widget.

Also, I will let you know when the team gets back with a response regarding the CSS.
Thanks! Have a great day!


Kind regards,
Agapi G.
Web-Dorado team
#77611

Please Log in or Create an account to join the conversation.


Agapi G. replied the topic: widget styling

Hello Criss!

Our development team has checked the CSS code. If you add #footer ID before your widget selectors, the styles will apply properly. For example, they have added the following to Calendar Settings > Custom CSS panel:

#footer .ecwd_21334 .ecwd_calendar .metainfo, 
#footer .ecwd_21334 .event-organizers a, 
#footer .ecwd_21334 .event-venue a, 
#footer .ecwd_21334 .event-detalis span,
#footer .ecwd_21334 .event-detalis a {color:#ddd !important;}

#footer .ecwd_21334 .ecwd-day-date,
#footer .ecwd_21334 .day-event-list .ecwd-week-date, 
#footer .ecwd_21334 .day4-event-list .ecwd-week-date, 
#footer .ecwd_21334 .week-event-list .ecwd-week-date {font-style:normal !important;}

Feel free to transfer the code to your CSS file. So basically, when you write a CSS selector, simply add the ID of your theme footer (#footer in this case), and the styles will apply properly.

Thanks! Have a wonderful day!


Kind regards,
Agapi G.
Web-Dorado team
#77667

Please Log in or Create an account to join the conversation.


Criss replied the topic: widget styling

Thank you Agapi and please thank also your dev team!
That #footer solution sounds more logical than what we have tried so far. After all the footer is always a world on its own., isn't it?

Criss

#77687

Please Log in or Create an account to join the conversation.


Agapi G. replied the topic: widget styling

You are most welcome, Criss!

We are very happy to know that this works for you. Please feel free to let our team know in case you will have other questions.
We'll gladly assist you any time!

Thanks! Have a wonderful day!


Kind regards,
Agapi G.
Web-Dorado team
#77731

Please Log in or Create an account to join the conversation.


Criss replied the topic: widget styling

Hello, let me first give you my wishes for the best 2017 ! :woohoo:

I'm reopening this thread because I'm experiencing styling issues after updating to latest version.
Some of the styles I applied before are not recognised anymore, plus I have some icons missing, a broken table layout and posterboard view layout (see screenshots).
Can you come and help me up? Criss

#79027
Attachments:

Please Log in or Create an account to join the conversation.


Agapi G. replied the topic: widget styling

Hello Criss!

Thank you for keeping us posted about this! We will love to help you out with this problem. Could you please reopen the admin account you have had for us? We will take a look at the problems as soon as possible and figure out a solution.

Thanks! Have a wonderful day!


Kind regards,
Agapi G.
Web-Dorado team
#79227

Please Log in or Create an account to join the conversation.


Criss replied the topic: widget styling

try with these:


Part of the message is hidden for the guests. Please log in or register to see it.


My CSS is under menu "custom css & js" > all custom code > my calendar main+widget

#79231

Please Log in or Create an account to join the conversation.


Agapi G. replied the topic: widget styling

Thank you, Criss!

I have forwarded the username and password to our developers, and removed them from your post just in case. The team will take a look at the issues and figure out a solution soon.

Thanks! Have a wonderful day!


Kind regards,
Agapi G.
Web-Dorado team
#79393

Please Log in or Create an account to join the conversation.


Agapi G. replied the topic: widget styling

Hello Criss!

Our developers checked these problems, and informed, that they are caused by an error coming from your website theme. It is a Google Maps API key error, should be easily fixable.

This is why the icons aren't displaying properly. Also, the gap between calendar header and month view is a result of this conflict with the theme. Could you please check these glitches with the developers of your site theme?

Thanks! Have a wonderful day!


Kind regards,
Agapi G.
Web-Dorado team
#79667

Please Log in or Create an account to join the conversation.


Criss replied the topic: widget styling

This theme is a nightmare, really giving me conflicts with any plugin. Unfortunatley is also not being supported by the authors since they have been nailed to their responsabilities by other users. They simply neglect any support. Very bad people and I'm wondering why the guys at Envato don't kick them out of their market platform.
But I will have someone fix the theme and If you tell me that EventCalendar should be back to normal as soon as I do that, that sounds like a relief.
Thank you for investigating this matter. Cheers...

#79671

Please Log in or Create an account to join the conversation.


Agapi G. replied the topic: widget styling

Hey Criss!

We are sorry to hear that, they should provide support for premium users at least. But yes, if you fix these errors the theme throws, the styling issues will be resolved.

But please don't hesitate to let us know in case you will notice any other glitches afterwards. We'll be happy to assist!
Thanks! Have a great day!


Kind regards,
Agapi G.
Web-Dorado team
#79859

Please Log in or Create an account to join the conversation.


Time to create page: 0.390 seconds
Powered by Kunena Forum

WORLD-CLASS SUPPORT

We are here for you every step of the way. Turn to our support with any questions you might have about our products and services. Our experienced customer care team is available to help you as fast as we possibly can.

Contact us