• This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

How to identify and remove border radius from all individual elements

Paul B

XenForo moderator
Staff member
What started out as an exercise to try and remove all the radius so I had a blank slate to start from, turned into a full scale hunt for all the border radius throughout the whole style.

If you want to remove it from every single element individually, then in addition to removing it from all Style Properties groups, you need to add the code below to EXTRA.css.

Code:
/* Navigation tab pop-up*/
.Popup .PopupControl.PopupOpen,
.Popup.PopupContainerControl.PopupOpen {
border-radius: 0;
}
 
/* Alerts list pop-up*/
.navPopup .PopupItemLinkActive:hover {
border-radius: 0;
}
 
/* Search */
#QuickSearch {
border-radius: 0;
}
 
#QuickSearch .commonSearches li a {
border-radius: 0 !important;
}
 
.formPopup .controlsWrapper {
border-radius: 0;
}
 
 
.formPopup .advSearchLink {
border-radius: 0 !important;
}
 
ul.autoCompleteList li:hover,
ul.autoCompleteList li.selected {
border-radius: 0;
}
 
/* Search calendar */
#calroot {
border-radius: 0;
}
 
.calweek a {
border-radius: 0;
}
 
/* Page node navigation */
#pageNodeNavigation {
border-radius: 0 !important;
}
 
/* Thread view */
.thread_view .threadAlerts {
border-radius: 0 !important;
}
 
.thread_view .threadNotices {
border-radius: 0 !important;
}
 
/* Small button, e.g. "Add Additional Response" */
.button.smallButton {
border-radius: 0;
}
 
/* Uploader */
.AttachmentEditor .AttachedFile .ProgressMeter {
border-radius: 0 !important;
}
 
/* Poll icon */
.pollBlock .questionMark {
border-radius: 0 !important;
}
 
/* Poll options */
.pollBlock .pollOption label:hover {
border-radius: 0 !important;
}
 
/* Filter */
.discussionListFilters .removeFilter,
.discussionListFilters .removeAllFilters {
border-radius: 0 !important;
}
 
/* Locked thread */
.thread_view .threadAlerts {
border-radius: 0 !important;
}
 
/* Smiley list on Help page */
.smilieList .smilieText {
border-radius: 0 !important;
}
 
/* BB Code on Help page */
.bbCode dl dd {
border-radius: 0 !important;
}
 
/* Important message */
p.importantMessage {
border-radius: 0;
}
 
/* Account sidebar */
.textWithCount.subHeading .count {
border-radius: 0 !important;
}
 
/* Conversation message */
.conversation_view .messageList {
border-radius: 0 !important;
}
 
/* Links */
.emCtrl,
.messageContent a {
border-radius: 0 !important;
}
 
/* Overlay*/
.xenOverlay .formOverlay .heading {
border-radius: 0;
}
 
/* Ajax alerts */
#StackAlerts .stackAlert {
border-radius: 0;
}
 
#StackAlerts .stackAlertContent {
border-radius: 0;
}
 
/* Moderator bar */
#moderatorBar a {
border-radius: 0 !important;
}
 
/* Moderation queue and reported items alerts */
#moderatorBar .itemCount {
border-radius: 0 !important;
}
 
#moderatorBar .itemCount.alert {
border-radius: 0;
}
 
/* Inline edit */
.inlineCtrlGroup .textCtrl {
border-radius: 0 !important;
}
 
/* Error overlay */
.xenOverlay .errorOverlay {
border-radius: 0;
}
 
.xenOverlay .errorOverlay .heading {
border-radius: 0;
}
 
/* Inline error form */
.formValidationInlineError {
border-radius: 0;
}
 
/* Forum error message */
.errorPanel {
border-radius: 0;
}
 
/* More messages */
.messageList .newMessagesNotice {
border-radius: 0 !important;
}
 
/* Avatar editor */
.AvatarEditor .avatarOption {
border-radius: 0 !important;
border: 1px solid @primaryDarker !important;
}
 
/* Attachments */
.attachment .boxModelFixer {
border-radius: 0 !important;
}
 
.chooserColumns li a {
border-radius: 0 !important;
}
 
.chooserColumns .icon {
border-radius: 0 !important;
}
 
/* Visitor information */
#visitorInfo {
border-radius: 0 !important;
}
 
/* Simple message */
.messageSimpleList .placeholder .placeholderContent {
border-radius: 0 !important;
}
 
/* Lightbox */
.xenOverlay.lightBox .formOverlay {
border-radius: 0 !important;
}
 
.xenOverlay.lightBox #LbUpper {
border-radius: 0 !important;
}
 
.xenOverlay.lightBox #LbLower {
border-radius: 0 !important;
}
 
.lightBox .avatar img {
border-radius: 0 !important;
}
 
.lightBox .imageContainer .imageCount {
border-radius: 0 !important;
}
 
.lightBox .imageNav .ctrl {
border-radius: 0 !important;
}
 
.lightBox .thumbsContainer {
border-radius: 0 !important;
}


I'm 99% certain that's all of it, but if I find any stragglers, I'll update the code.
Update: I've been through every css template now so I'm fairly sure that's everything.

Edit: As per sadikb's post here http://xenforo.com/community/threads/clip-the-apex.19440/page-2#post-317139, yes you can completely remove it with a single line of code like so:
Code:
* {
border-radius: 0 !important;
}
That however doesn't tell you where it all is or give you control over each individual element, allowing you to selectively remove or apply it where required.
 
I've added the first code but nothing happened. Second single line code works though. Tested with Whisper 2
 
Top Bottom