Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
Tati
0 / 0 / 0
Регистрация: 19.10.2015
Сообщений: 10
#1

Изменить внешний вид плагина WP - HTML, CSS

10.11.2015, 21:53. Просмотров 426. Ответов 6
Метки нет (Все метки)

Приветствую!

Мне нужно изменить внешний вид виджета Attach Files Widget для WP. А именно разместить прикрепленные файлы не один над другим, а на одном уровне по горизонтали.

Файлы размещены в виде списка. Вот он код, который за это отвечает, как мне кажется.
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?php
    $out = '<div class="ex-attachments ex-attachments-not-widget-out"><ul class="ex-attachments-'.$icons.'icons">';
    $counter = 0;
 
    foreach($data as $element) {
 
        if ($limit > 0 && ($counter == $limit) ) {
            break;
        }
 
        $out .= '<li><a target="_blank" href="' . $element['link'].'">';
 
        if ($icons != 'no') {
            $path = parse_url( $element['link'], PHP_URL_PATH );
            $ext = strtolower( pathinfo( $path, PATHINFO_EXTENSION ) );
            if (!array_key_exists($ext, $filetype_icons))
                $ext = 'file';  // if no specific filetype icon, use a generic image
 
            $out .= '<img src="'.$assetsUrl.'/images/'.$filetype_icons[$ext].'.png" />';
        }
 
        $out .= '<div>'. $element['name'] .'</div></a>';
 
        if (!empty($element['description'])) {
            $out .= '<p>' . $element['description'] .'</p>';
        }
 
        $out .= '</li>';
        $counter++;
    }
 
 
    $out .= '</ul></div>';
Что мне нужно сделать, чтобы 3-4 файла прикрепленные появлялись рядом друг с другом (в одной горизонтальной линии)?
Спасибо!
0
Миниатюры
Изменить внешний вид плагина WP  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
10.11.2015, 21:53
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Изменить внешний вид плагина WP (HTML, CSS):

Возможно ли изменить внешний вид кнопок? - HTML, CSS
Доброго времени суток. Назрел такой вопрос, возможно когда то давно он уже поднимался. Однако подобного поста я не увидел. Дело в том, что...

Необходимо изменить внешний вид сайта. Прошу совета - HTML, CSS
Доброго настроения, уважаемые форумчане! Прошу вашего совета, и желательно пошаговой инструкции, по изменению внешнего вида сайта вот...

Как изменить внешний вид html5 аудио плеера - HTML, CSS
Добрый день, подскажите пожалуйста скрипт, для изменения внешнего вида аудио плеера html 5.

Изменить внешний вид календаря в контактной форме FS Contact Form - HTML, CSS
я не большой специалист в этом, но хотел бы узнать - возможно ли изменить внешний вид календаря в FS Contact Form с помощью jquery? ...

Подрихтовать внешний вид - HTML, CSS
Есть сайт http://www.gromada.dn.ua/skifline2/index.php/en/. Лезет правый край главного окна - налезает за границу определённую выше....

Внешний вид(карскас) - HTML, CSS
Знающие люди помогите пожалуйста советом, а лучше и делом)) Только начал заниматься HTML и CSS, так что неособо много знаю. Подскажите...

6
Azdeman
Фрилансер
Эксперт HTML/CSSЭксперт PHP
1729 / 1272 / 349
Регистрация: 12.01.2011
Сообщений: 5,059
10.11.2015, 22:06 #2
Это нужно менять в css файле.. здесь нет переноса строки в этом коде, но зато классы есть .
1
Tati
0 / 0 / 0
Регистрация: 19.10.2015
Сообщений: 10
23.12.2015, 20:51  [ТС] #3
Никогда не меняла расположение элементов через CSS Непонятно, что в нем менять надо.... Поможете?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.ex-attachments {
  border-top: 2px solid #D5D5D5;
  }
  .ex-attachments li:first-child {
    display: none;
    }
  .ex-attachments li {
    padding: 8px 0 2px 2px;
    margin: 0;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
    }
  .ex-attachments li > span {
    float: left;
    width: 15px;
    }
  .ex-attachments li > div {
    margin-left: 15px;
    }
  .ex-attachments a {
    text-decoration: none;
    }
  .ex-attachments li p {
    margin: 1px 0 !important;
    }
  .ex-attachments .remove{
    text-decoration: none;
    }
  .ex-attachments li:not(.default):before {
    }
  .ex-attachments li > span a {
    display: block;
    width: 15px;
    height: 15px;
    background-image: url('../images/arrows.png');
    }
  .ex-attachments li > span a.up {
    background-position: -4px -35px;
    }
  .ex-attachments li > span a.down {
    background-position: -4px -1px;
    }
0
СлаваВирус
466 / 394 / 149
Регистрация: 04.01.2013
Сообщений: 1,674
23.12.2015, 20:56 #4
CSS
1
2
3
4
5
6
7
.ex-attachments li {
padding: 8px 0 2px 2px;
margin: 0;
border-bottom: 1px solid #e5e5e5;
overflow: hidden;
display: inline-block;
}
Вроде так
1
Tati
0 / 0 / 0
Регистрация: 19.10.2015
Сообщений: 10
29.12.2015, 21:28  [ТС] #5
Спасибо за ответ! Хотела попробывать, но... Плагин вообще перестал показывать второй файл. Должно быть после обновлений. Кто-нибудь может подсказать аналогичный плагин?

Добавлено через 3 часа 1 минуту
Попробовала Ваш код, ничего не изменилось
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.ex-attachments {
  border-top: 2px solid #D5D5D5;
  }
  .ex-attachments li:first-child {
    display: none;
    }
  .ex-attachments li {
    padding: 8px 0 2px 2px;
    margin: 0;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
    display: inline-block;
    }
  .ex-attachments li > span {
    float: left;
    width: 15px;
    }
  .ex-attachments li > div {
    margin-left: 15px;
    }
  .ex-attachments a {
    text-decoration: none;
    }
  .ex-attachments li p {
    margin: 1px 0 !important;
    }
  .ex-attachments .remove{
    text-decoration: none;
    }
  .ex-attachments li:not(.default):before {
    }
  .ex-attachments li > span a {
    display: block;
    width: 15px;
    height: 15px;
    background-image: url('../images/arrows.png');
    }
  .ex-attachments li > span a.up {
    background-position: -4px -35px;
    }
  .ex-attachments li > span a.down {
    background-position: -4px -1px;
    }
Но все-равно спасибо за попытку помочь!
0
AmateR62
115 / 115 / 57
Регистрация: 24.02.2014
Сообщений: 405
30.12.2015, 12:04 #6
А если вот так попробовать:
CSS
1
2
3
4
5
6
7
.ex-attachments li {
padding: 8px 0 2px 2px;
margin: 0;
border-bottom: 1px solid #e5e5e5;
overflow: hidden;
float: left;
}
1
Tati
0 / 0 / 0
Регистрация: 19.10.2015
Сообщений: 10
06.01.2016, 15:42  [ТС] #7
Предложенный Вами код сработал, спасибо!
Только вот выяснилось, что я меняла это в файле админпанели
Правильный файл вот он
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.ex-attachments-largeicons,
.ex-attachments-smallicons {
    list-style: none !important;
}
 
.ex-attachments-largeicons li {
    text-align: center;
}
 
.ex-attachments-largeicons img {
    width: 64px;
    height: 64px;
    opacity: 0.6;
}
 
.ex-attachments-largeicons li a:hover > img {
    opacity: 1;
}
 
.ex-attachments-largeicons div {
    margin-bottom: 20px;
}
 
.ex-attachments-smallicons img {
    float: left;
    width: 32px;
    height: 32px;
}
 
.ex-attachments-smallicons div {
    box-sizing: border-box;
    height: 32px;
    padding-top: 10px;
    margin-bottom: 10px;
}
 
.ex-attachments-noicons div {
    display: inline;
}
Я попыталась внести рекомендованные Вами поправки, но ничего не получилось. Поможете?
0
06.01.2016, 15:42
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
06.01.2016, 15:42
Привет! Вот еще темы с ответами:

Внешний вид меню - HTML, CSS
Почти закончив с созданием сайта, решил проверить его внешний вид в разных браузерах. У меня две проблемы с меню: во первых меню имеет...

Внешний вид inpit с датой - HTML, CSS
Здравствуйте! есть форма на сайте (прикреплена картинка). type=&quot;date&quot; как сделать так, чтобы вместо треугольника, открывающего календарь,...

Создать внешний вид страницы сайта - HTML, CSS
Помогите выполнить задание моего преподавателя : &quot;Добрый вечер. Экзаменационное задание - это реализовать, как можно детальнее,...

Внешний вид копия файла справки - HTML, CSS
Здравствуйте, копию внешнего вида файла справки *. chm, приложенного + кнопка вперёд справа от кнопки назад можете сверстать? то есть...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru